contenteditable

HTML contenteditable with non-editable islands

by

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

Vue 2 contentEditable with v-model

by

I tried an example, and eslint-plugin-vue reported that v-model isn’t supported on p elements. See the valid-v-model rule. As of this writing, it doesn’t look like what you want is supported in Vue directly. I’ll present two generic solutions: Use input events directly on the editable element <template> <p contenteditable @input=”onInput” > {{ content }} … Read more

Remove formatting from a contentEditable div

by

You can add a listener to the “paste” event and reformat the clipboard contents. Like so: let editableDiv = document.querySelector(‘div[contenteditable=”true”]’); editableDiv.addEventListener(“paste”, function(e) { e.preventDefault(); var text = e.clipboardData.getData(“text/plain”); document.execCommand(“insertHTML”, false, text); }); Here another example for all containers in the body: let allEditableDivs = document.querySelectorAll(‘div[contenteditable=”true”]’); [].forEach.call(allEditableDivs, function (el) { el.addEventListener(‘paste’, function(e) { e.preventDefault(); var text … Read more

How to select all text in contenteditable div?

by

I used some code from this thread to come up with my answer. It’s 100% jQuery as you asked for as well. Hope you like it 🙂 jQuery.fn.selectText = function(){ var doc = document; var element = this[0]; console.log(this, element); if (doc.body.createTextRange) { var range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { var … Read more

selectionStart and selectionEnd in contenteditable element

by

Try this, it returns the selected text, no matter if it’s contentEditable or not. function GetSelectedText() { if (document.getSelection) { // all browsers, except IE before version 9 var sel = document.getSelection(); // sel is a string in Firefox and Opera, // and a selectionRange object in Google Chrome, Safari and IE from version 9 … Read more

Extracting text from a contentEditable div

by

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

What is the default style of the blue focus outline in Chrome?

by

To answer the question, Webkit browsers use outline: 5px auto -webkit-focus-ring-color;. On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700) (ref). While I understand your desire for consistency, users generally only use one browser, and are used to their browser’s default styles. … Read more

How to replace selected text with html in a contenteditable element? [duplicate]

by

See here for working jsFiddle: http://jsfiddle.net/dKaJ3/2/ function getSelectionHtml() { var html = “”; if (typeof window.getSelection != “undefined”) { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement(“div”); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != … Read more