How to Avoid Webkit Contenteditable Copy-Paste Resulting in Unwanted CSS

How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

I had the same problem, plus the problem that every browser creates different HTML. So I wrote a JavaScript port of the Sanitize library: Sanitize.js

Sanitize.js is a whitelist-based HTML sanitizer written in JavaScript. Given a list of acceptable elements and attributes, Sanitize.js will remove all unacceptable HTML from a DOM node.

Have a look at the example, where I capture the paste event and process the HTML afterwards.

Copy paste inside div - contenteditable

You can work around this problem by putting the "contenteditable=false" attribute back after a paste:

$(document).bind("input", function(e){
    $(".uneditable").attr("contenteditable", "false");
});​

(This assumes that the label has a class of "uneditable". I use the "input" event rather than the "paste" event because that takes effect after the paste (rather than before), and it covers some other actions, such as dragging and dropping text.)

jsFiddle: http://jsfiddle.net/DYKbB/3/

Is there any way to not copy and paste the same stuff from @keyframes to @-webkit-keyframes in .css files?

The -webkit vendor prefix is not really needed anymore, the un-prefixed rule is now supported by most recent and older browsers.

So the short answer is just stop copy/pasting the vendor prefixed keyframes.

prevent contenteditable mode from creating span tags

Here is how I solved this

jquery remove <span> tags while preserving their contents (and replace <divs> and <p>:s with <br>)

I preserve the text of all div, span and p tags, remove those tags, and substitute all div and p with a br. I do it on blur, optimal would be to do it on every keydown, but that is eating too much cpu since I have to loop through all these %#¤¤%& (you said it) nested elements.

Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

More a workaround: you can exploit fact, that CSS generated content is invisible for clipboard (*), so with empty span with text moved to some attribute you have visually similar result with requested clibpoard behaviour:

[data-text] {  color: orange;}[data-text]::after {  content: attr(data-text);}

<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>

Prevent contenteditable element from getting focus when clicking parent

I fixed it with the way I put pointer-events: none on parent element and pointer-events: all on element with content editable attribute.

Prevent contenteditable (in flexed div) from expanding

You have given .column the property flex: 1. From the spec

w3

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that
receives the specified proportion of the free space in the flex
container. If all items in the flex container use this pattern, their
sizes will be proportional to the specified flex factor.

To prevent column and it's contents from expanding you need to give it a max-width value.

I would also suggesting removing margin-right from .column. Instead, set the column width and use the justify-content property on the container.

fiddle

.container {  width: calc(100% - 34px);  height: 185px;  margin-left: 17px;  margin-top: 17px;  display: flex;  justify-content: space-between;}
.column {  flex: 1;  height: 186px;  max-width: 19%;}
.field {  margin-bottom: 5px;  display: flex;  width: 100%;}
.field_left {  width: 6px;  height: 24px;  background: green;}
.field_middle {  height: 24px;  background: red;  width: calc(100% - 13px);}
.field_right {  width: 7px;  height: 24px;  background: blue;}
[contenteditable] {  display: inline;  white-space: nowrap;  overflow: hidden;  text-overflow: inherit;  -webkit-user-select: auto;  user-select: auto;  -moz-user-select: -moz-text;}

<div class="container">  <div class="column">    <div class="field">      <div class="field_left"></div>      <div class="field_middle" contenteditable="true"></div>      <div class="field_right"></div>    </div>  </div>  <div class="column">    <div class="field">      <div class="field_left"></div>      <div class="field_middle" contenteditable="true"></div>      <div class="field_right"></div>    </div>  </div>  <div class="column">    <div class="field">      <div class="field_left"></div>      <div class="field_middle" contenteditable="true"></div>      <div class="field_right"></div>    </div>  </div>  <div class="column">    <div class="field">      <div class="field_left"></div>      <div class="field_middle" contenteditable="true"></div>      <div class="field_right"></div>    </div>  </div>  <div class="column">    <div class="field">      <div class="field_left"></div>      <div class="field_middle" contenteditable="true"></div>      <div class="field_right"></div>    </div>  </div></div>

---

Related Topics