contenteditable

问题 I'm working on a simply syntax highlighter that replaces text with dom elements with classes. Say, I have a <div contenteditable="true"> Some text. | And some other text. </div> and the cursor is at the | pipe //if a user types foo <div contenteditable="true"> Some text. foo| And some other text. </div> // and I replace it, then set the selection after the inserted element <div contenteditable="true"> Some text. <span class="highlight-foo">foo</span>| And some other text. </div> but if you

问题 I have a contentEditable DIV (building a kind of editor component). I am looking for a way to highlight the current word the user is typing and the sentence that word is on. For example, consider the following paragraph: I am a sample paragraph. I contain words that dont make much sense but are there just to fill the space. I can have only one caret at a time. ... Now if the caret is on the word 'sample' in the first sentence, i want to highlight the word ('sample') and that sentence ('I am a

问题 I'm using this solution by Tim Down to get selected html in a contenteditable div, and it's working fine (thank you Tim!) But using Chrome, if I select a html string exactly at the boundaries of a html tag, as in this image: http://i.imgur.com/UiYzrcp.png?1: what I get it's just plain text ( test in this case). If I expand the selection to a next character (letter c for example), instead I get the correct html ( <strong>test</strong> c ). Can I get the full html in Webkit by selecting a word

问题 I believe the title is pretty self-explanatory but still, maybe, I should ask in detail. I'm building a WYSIWYG editor and I'm really at the beginning of it. So, I realized that maybe knowing the pros and cons would enlighten me. Basically, my question is, since I want an editor that would work at least with 90% in all major browsers, how further I can go using contenteditable within a div and what are the cons and pros of using contenteditable when compared with designMode and iframe? Also,

问题 I am working on a contenteditable div to make a simple RichText-Editor. One of the requirement I have is to be able insert html chunk at cursor postion on a button event. I was able to get that part working fine by using range , selection , range.insertNode(nodeHTML) or range.pasteHTML(nodeHTML) based on browser. But I couldn't get two things, which ideally I would like to have To be Able to undo the inserted node, using browser's undo. Somehow, browser ignores above actions. To move the

问题 I am attempting to create a simple texteditor with HTML5 contenteditable on a div tag. As you know, selected text is handled quite differently in IE. this.retrieveAnchorNode = function() { var anchorNode; if (document.selection) anchorNode = document.selection.createRange().parentElement(); else if (document.getSelection) anchorNode = window.getSelection().anchorNode; } I am looking for a way to get the selected textnode (not the text itself), like I can do with "anchorNode" and "focusNode"

问题 I'm trying to create a Polymer element for contenteditable. I create a contenteditable div, place this.innerHTML there, and it becomes editable. All good with polyfills, e.g. in Firefox. But it doesn't work in Chrome 35 with native Shadow DOM. Well, it is still editable, but neither document.execCommand nor window.getSelection is working. document.execCommand does nothing. window.getSelection().getRangeAt(0).toString() is defined but empty. No error is shown. So I cannot style the selection.

问题 It seems it allows you to edit the content of an element, but what is actually happening? What's the use of this property? EDIT: see here 回答1: This is usually used for rich text input. While regular form elements like <input type="text"/> don't provide real rich text editing options, elements with contentEditable set to true can. Most rich text editors (e.g. FCK Editor) available for the web are built using an <iframe/> with contentEditable set to true . 回答2: contentEditable=true for elements

问题 I have the following code demonstrating contenteditable property and a button that will inject bold text into the paragraph with contenteditable area. My question is how to return focus to where i left off after clicking on bold, if you highlight some text, and click bold, it'll bold those text, but the focus will not be there anymore. Same thing happens if you don't select anything and click bold, the focus will be gone and if you click where you left off again, you can type bold texts.

问题 I have a contenteditable div and it contains other tags and not only plain text. Only one @ is allowed in. How can I get the range of the characters between @ and caret if such a range exists? 回答1: Ha that was easier than I thought!. Based on this easy to overlook question: Div "contenteditable" : get and delete word preceding caret I forked its jsfiddle and here is mine working as expected: http://jsfiddle.net/52m2thu2/1/ function getWordBetweenAtAndCaret(containerEl) { var preceding = "",