I’m a CKEditor developer. We’ve got some experience with nested readonly elements (i.e. placeholder plugin and the feature we’re working on currently #9764) and I don’t have good news. You have to handle every behaviour manually if you want to have consistent look&feel. There are no tricks that will fix browsers. And many things (like … Read more
If you can get the co-ordinates of the drop location (which I assume must be possible), you can do it as follows (untested). I’m assuming you’ve got the co-ordinates of the drop location relative to the viewport as variables x and y and the dropped image as the variable img: Demo: http://jsfiddle.net/KZqNj/ Code: var range; … Read more
Just wrap the link in another div, like so: <div contentEditable=”true”> <div contentEditable=”false”> Bla bla <a href=”http://google.com”>Google</a> Bla bla </div> </div>
I spent on this a lot of time myself, when trying to completely hide control selections (this is how they are called) in CKEditor’s widgets. Unfortunately I don’t have a good news. Solution 1 First of all, there’s a mscontrolselect event. When I found it (and the fact that its name has an ms prefix) … Read more
In order to solve your problem, always keep a br element as the last element of your contenteditable div. This will ensure predictable behavior when injecting a br element vs. the browser default of injecting div elements. You can check the lastChild on keyup and mouseup to make sure it’s a br element. Assuming you … Read more
In order to solve your problem, always keep a br element as the last element of your contenteditable div. This will ensure predictable behavior when injecting a br element vs. the browser default of injecting div elements. You can check the lastChild on keyup and mouseup to make sure it’s a br element. Assuming you … Read more
Firstly, think about why you’re doing this. If you’re trying to stop users from editing certain elements, just set contenteditable to false on those elements. However, it is possible to do what you ask. The code below works in Safari 4 and will return the node the selection is anchored in (i.e. where the user … Read more
Just store the contents to a variable and check if it is different after blur() event. If it is different, store the new contents. var contents = $(‘.changeable’).html(); $(‘.changeable’).blur(function() { if (contents!=$(this).html()){ alert(‘Handler for .change() called.’); contents = $(this).html(); } }); example: http://jsfiddle.net/niklasvh/a4QNB/
This technique appears to avoid the Chrome bug that does show BRs the first time (with the code you mentionned you need to push two times the Enter key). It’s not a perfect hack but it works: it adds a whitespace after your BR so it show properly. However, you will see that adding only … Read more
Have you tried this? Get a range’s start and end offset’s relative to its parent container Direct link to the jsfiddle: https://jsfiddle.net/TjXEG/1/ Function code: function getCaretCharacterOffsetWithin(element) { var caretOffset = 0; if (typeof window.getSelection != “undefined”) { var range = window.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.endContainer, range.endOffset); caretOffset = preCaretRange.toString().length; } else if (typeof … Read more