ContentEditable div disable editing inside child divs

Asked Mar 12 '15 at 19:08

Active Mar 12 '15 at 19:24

Viewed 2,656 times

I am building a sipmle WYSIWYG editor for my website.

Insite the possible contents it will generate, there is a youtube video which is wrapped by a div to make it responsive.

My problem is, once I insert this sub-div inside the contentEditable div, sometimes the user will place the caret inside the child div, adding content to it, when that element that should be left untouched and further data should be added outside of it.

Is there a way to prevent the caret from going inside the child div? Or any other possible solution to this problem?

Here is the basic code:

<div class="htmlbox">
    <div class="htmlboxtools">
        <div class="icon-video"  onclick="insertVideo(this)"></div>
    </div>
    <div class="htmlboxedit" contenteditable="true">
    </div>
</div>

function insertVideo(element){

    $(element).closest('.htmlbox').children('.htmlboxedit').focus();
    embed = '<div class="video-responsive"><iframe src="http://www.youtube.com/embed/SMe-hvCwTRo" frameborder="0" allowfullscreen></iframe></div>';
    pasteHtmlAtCaret(embed);

};

pasteHTMLatCaret() is found here: https://stackoverflow.com/a/6691294/2724978

edited May 23 '17 at 12:09

Community

asked Mar 12 '15 at 19:08

sigmaxf

7,998
15
65
125

1

Can you post your code? – jmartins Mar 12 '15 at 19:11
4

"a simple WYSIWYG editor". – dclowd9901 Mar 12 '15 at 19:13
Check this http://stackoverflow.com/questions/14615551/html-contenteditable-with-non-editable-islands – c-smile Mar 12 '15 at 19:14
edited to add the code – sigmaxf Mar 12 '15 at 19:26

ContentEditable div disable editing inside child divs

0 Answers0