How to make clickable anchor in contentEditable div?
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>
contenteditable
Tag-like autocompletion and caret/cursor movement in contenteditable elements
You could use my Rangy library, which attempts with some success to normalize browser range and selection implementations. If you’ve managed to insert the <a> as you say and you’ve got it in a variable called aElement, you can do the following: var range = rangy.createRange(); range.setStartAfter(aElement); range.collapse(true); var sel = rangy.getSelection(); sel.removeAllRanges(); sel.addRange(range);
Set cursor after span element inside contenteditable div
In browsers other than IE <= 8, this will do it: function placeCaretAfterNode(node) { if (typeof window.getSelection != “undefined”) { var range = document.createRange(); range.setStartAfter(node); range.collapse(true); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } } However, some browsers (notably WebKit-based ones) have fixed ideas about which positions in the document are valid for the caret and … Read more
contenteditable div backspace and deleting text node problems
After breaking down how google uses contenteditable divs in their google plus user tagging, I landed on a much more reasonable solution. Maybe it will help someone else out. After adding 1 tag, you can already see a lot of differences in the html browser to browser. In Google Chrome, a space is added with … Read more
How to change behavior of contenteditable blocks after on enter pressed in various browsers
As Douglas said earlier, browsers try to clone previous tag when customer starts a new paragraph on an editable page. The discrepancy occurs when browser has nothing to depart from – e.g. when initially the page body is empty. In this case different browsers behave differently: IE starts to wrap every string into <p> tag, … Read more
Get content of span
Give this a shot: var input = document.getElementById(“myInput”); var text = input.innerHTML;
Contenteditable with ng-model doesn’t work
contenteditable tag will not work directly with angular’s ng-model because the way contenteditable rerender the dom element on every change. You have to wrap it with a custom directive for that: JS: angular.module(‘customControl’, [‘ngSanitize’]). directive(‘contenteditable’, [‘$sce’, function($sce) { return { restrict: ‘A’, // only activate on element attribute require: ‘?ngModel’, // get a hold of … Read more
HTML contenteditable with non-editable islands
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
Extracting text from a contentEditable div
Unfortunately you do still have to handle this for the pre case individually per-browser (I don’t condone browser detection in many cases, use feature detection…but in this case it’s necessary), but luckily you can take care of them all pretty concisely, like this: var ce = $(“<pre />”).html($(“#edit”).html()); if($.browser.webkit) ce.find(“div”).replaceWith(function() { return “\n” + this.innerHTML; … Read more
Make a instead of by pressing Enter on a contenteditable
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