contenteditable

Save changes made by content editable on any website

由 大兔子大兔子 提交于 2020-08-24 07:57:10
问题 The following code allows any website to be completely editable temporarily: document.body.contentEditable = "true"; If I want to save the settings made to a particular website using this method, how can I achieve this using Javascript and if needed PHP, so that next time I visit this URL, the website updates automatically with the settings made. Is this even possible? Is there an extension already available? 回答1: Here's a way you can do this using vanilla JS. Here's JSFiddle since

Angular and Typescript - set cursur position multiple child element in contenteditable div(tried almost all articles)

由 馋奶兔 提交于 2020-08-05 17:42:41
问题 Can some one help me to get this resolved? Here is the stackblitz code I am working If you know any workaround, please let me know. I have searched almost all the articles in stackoverflow but none worked for me..I have a contenteditable div and when user types 'foo' it's automatically changes to bar(this changes based on some condition) and it can be multiple tags ( child elements ) too. The Caret/cursur keeps going to start position and typing backward.can anyone help me to get this

Angular and Typescript - set cursur position multiple child element in contenteditable div(tried almost all articles)

由 拜拜、爱过 提交于 2020-08-05 17:38:07
问题 Can some one help me to get this resolved? Here is the stackblitz code I am working If you know any workaround, please let me know. I have searched almost all the articles in stackoverflow but none worked for me..I have a contenteditable div and when user types 'foo' it's automatically changes to bar(this changes based on some condition) and it can be multiple tags ( child elements ) too. The Caret/cursur keeps going to start position and typing backward.can anyone help me to get this

How can I take elements out of the DOM, after pasting or dropping something?

由 荒凉一梦 提交于 2020-08-05 09:37:33
问题 I am using jQuery's remove() function to delete everything that is pasted/dropped in a contenteditable area, except for text. I am especially interested in disabling images. I tried it this way function removeImg() { setInterval(function() { $("#editableDiv").contents(":not(p)").remove(); }, 1); } #editableDiv { padding-left: 10px; width: 100%; border: solid 1px blue; } img { width: 100px; margin-right: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><

How can I take elements out of the DOM, after pasting or dropping something?

由 淺唱寂寞╮ 提交于 2020-08-05 09:37:22
问题 I am using jQuery's remove() function to delete everything that is pasted/dropped in a contenteditable area, except for text. I am especially interested in disabling images. I tried it this way function removeImg() { setInterval(function() { $("#editableDiv").contents(":not(p)").remove(); }, 1); } #editableDiv { padding-left: 10px; width: 100%; border: solid 1px blue; } img { width: 100px; margin-right: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><

Problems with contenteditable span inside hyperlink in Firefox

由 浪尽此生 提交于 2020-06-17 05:15:52
问题 I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to: place the cursor on mouseclick somewhere inside the span select part of the text inside the span using the mouse Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome. Please try my example on JSFiddle. <ul> <li> <a

div content editable with placeholder [duplicate]

由 北慕城南 提交于 2020-06-09 03:58:08
问题 This question already has answers here : If editable div have no text than set placeholder [closed] (4 answers) Is it possible to add placeholder in div tag (4 answers) Closed 5 days ago . I am trying to create a editor like LinkedIn create post component. There I want to keep non removable <p><br></p> content like below. <div #mainEditor contenteditable="true"><p><br></p></div> Also want to show a placeholder when editor has no value. Just inspect LinkedIn editor and see my scenario. I have

why is contenteditable beforeinput event not cancelable?

由 烈酒焚心 提交于 2020-05-15 11:17:13
问题 Reading this webkit document, It says the beforeinput event when used with contenteditable is cancelable. But I run the code in the document on a chrome browser and the event is not cancelable. Am I mistaken? How to enable the beforeinput event to be cancelable? <body onload="setup()"> <div id="editor" contenteditable> <p>This is some regular content.</p> <p>This text is fully editable.</p> <div class="quote" style="background-color: #EFFEFE;"> <p>This is some quoted content.</p> <p>You can

why is contenteditable beforeinput event not cancelable?

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-05-15 11:17:06
问题 Reading this webkit document, It says the beforeinput event when used with contenteditable is cancelable. But I run the code in the document on a chrome browser and the event is not cancelable. Am I mistaken? How to enable the beforeinput event to be cancelable? <body onload="setup()"> <div id="editor" contenteditable> <p>This is some regular content.</p> <p>This text is fully editable.</p> <div class="quote" style="background-color: #EFFEFE;"> <p>This is some quoted content.</p> <p>You can

contenteditable is not working with cdkDrag

由 六月ゝ 毕业季﹏ 提交于 2020-04-28 21:12:48
问题 I am trying to use a div element tag and make it behave as a textarea with css. #textarea { -moz-appearance: textfield-multiline; ------------ card.component.css -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 400px; } <div id="textarea" contenteditable>I look like a textarea</div> ---- card.component.html But i am using cdkDrag on my card from parent component(Category
订阅 contenteditable