CODEWITHSUNDEEP
javascripthtmlcsstinymcecontenteditable
Sherwood Wang
Sherwood Wang

Reputation: 715

Make an uneditable block inside a contanteditable element

I want to put an uneditable element into the TinyMCE which itself can be selected, cut, pasted and dragged just like <img> but its content is not editable.

I tried <div contenteditable="false"> with Chrome. It isn't editable. But it cannot be selected or dragged either.

Is there any way to make a composite element (like <div>) atomic, just like a character or image, in a contenteditable area.

Upvotes: 3

Views: 504

Answers (2)

Sherwood Wang
Sherwood Wang

Reputation: 715

I found the new WYSIWYG editor of Wikipedia has already implemented this. The reference numbers and tables of related topics at the buttom of pages are draggable. They are all composite elements.

When mouse hovers on an element which is designed to be draggable as a whole, it puts an undraggable uneditable <div> over it as a protector. When the protector is clicked, it's replaced by an transparent <img>. So what users are actually dragging is the <img>. After the user drop the <img>, it moves the element originally under the <img> to the new place.

Upvotes: 0

Adam
Adam

Reputation: 1874

One trick is to use an input[type="button"] since these are uneditable even in a contenteditable region.

<textarea>
    <p>This is editible content.</p>
    <input value="This is uneditable content." type="button" draggable="true" style="border: 0; background: transparent; padding: 0; margin: 0; font-family: inherit" />
</textarea>

<script>
    tinyMCE.init({ mode: 'textareas' });
</script>

TinyMCE Fiddle

It's not perfect since inputs can't have child elements.

If you need to display dynamic HTML, you can render the HTML to a canvas element (using html2canvas or equivalent) and then set the background image of the input[type="button"] to the string obtained from calling getDataURL on the canvas. (You'll also need to compute the height and width of the rendered HTML and set the input[type="button"] height and width to match.)

Upvotes: 1

Related Questions