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
Maybe I’m misreading the question, but wouldn’t the following do (assuming an editable <div> with id “editable”)? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focus event, thereby overriding the effect of the selection code unless postponed until after the focus event: … Read more
This is a community wiki answer. You can edit me with your improvements. Alphabetically sorted. Inline Inline editors differ from normal editors as they can edit the content directly, i.e. not placing it inside another element, or inside an iframe. Aloha Editor inactive since May 2016 CKEditor – starting from CKEditor 4 Beta Etch FresherEditor … Read more
Dirty hack to clean the pasted data. function onpaste(e, el){ setTimeout(function(){ el.innerText = el.innerText; }, 10); }
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
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
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
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
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
Set the outline property to 0px solid transparent;. You might have to set it on the :focus state as well, for example: [contenteditable]:focus { outline: 0px solid transparent; }