contenteditable

问题 There's this question, but the solution posted is browser sniffing, which I'm trying to avoid. I need to make my website compatible with the iPad and perhaps newer Androids. I've been using an old version of the FCKEditor (now CK Editor) for my WYSIWYG editors, but that doesn't work on mobile, so I want to swap it out for a simple textarea with something like markdown, if it's not supported. Supposedly it won't work because mobile devices tend not to support this contentEditable property,

问题 Problem: I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after. Example: example on jsfiddle html: <div contenteditable="true" class="editor"> <p>This is the first paragraph.</p> <p>←Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> </div> css: .widget{

问题 Problem: I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after. Example: example on jsfiddle html: <div contenteditable="true" class="editor"> <p>This is the first paragraph.</p> <p>←Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> </div> css: .widget{

问题 I have an XML document that I'm displaying in a web browser, with a stylesheet attached: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/css" href="abc.css"?> <myxml xmlns:xhtml="http://www.w3.org/1999/xhtml"> <para>I wish i was editable</para> <xhtml:script type="text/javascript" src="abc.js"/> </myxml> With the xhtml namespace declaration, and xhtml:script tag, I can execute javascript. What I'd like to do is to make arbitrary non-XHTML elements in this

问题 When the user edits a contenteditable div , and press some keys, I would like to override the default behavior. For instance, I want to insert a normal line break when the user press ENTER. I do that using document.execCommand("insertText",...) This is the only way I have found so far to make this action undoable and redoable by the user. <div id="editor" contenteditable="true" style="white-space:pre-wrap"> Some text.... </div> <script> $("#editor").keydown(function(evt){ console.log(evt

问题 I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this? Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off. 回答1: Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:

问题 I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this? Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off. 回答1: Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:

问题 So I have a jsfiddle describing a contenteditable div with a sticky footer area representing: https://jsfiddle.net/xd5p1h7u/ CSS .textarea { background: white; padding: 20px; min-height: 20px; width: 100%; } .footer { height: 20px; position: sticky; bottom: 0; background: blue; } HTML <div class="textarea" contenteditable="true"></div> <div class="footer"></div> If you type until you get to the bottom of the screen, you'll notice that the sticky footer covers up the bottom content. I've tried

问题 I have a contenteditable with a <p> element inside it like the following <div class="editable" contenteditable="true"> <p> dummy content here !!!!! </p> </div> When I click backspace on the keybord until it remove all the text, if I click the backspace again it removes also the <p> element ! In my case I would like to keep at least one <p> element there $(document).on('keydown', '[contenteditable=true]', function(e){ var contenteditable = $(this) if(e.keyCode == 8){ // if backspace var p =

问题 I have a contenteditable with a <p> element inside it like the following <div class="editable" contenteditable="true"> <p> dummy content here !!!!! </p> </div> When I click backspace on the keybord until it remove all the text, if I click the backspace again it removes also the <p> element ! In my case I would like to keep at least one <p> element there $(document).on('keydown', '[contenteditable=true]', function(e){ var contenteditable = $(this) if(e.keyCode == 8){ // if backspace var p =