contenteditable | 易学教程

How to get only html code without  on paste in contenteditable div..?

阅读更多关于 How to get only html code without on paste in contenteditable div..?

问题 I used contenteditable div to paste and replace all html tags with <br> tag. But the pasted html start with <html><body> and end with </body></html> . When i try to replace pasted html with <br> tag, it inserts three <br> tags at start position. So the pasted content start and end with three line breaks unnecessarily . How to remove those unwanted tags on paste..? Javascript code used to get pasted html content: $(document).on('paste','#div-id',function(e

React contenteditable svg text isn't editable

阅读更多关于 React contenteditable svg text isn't editable

问题 https://codepen.io/anon/pen/YaGdLV <svg><text contentEditable="true">HELLO</text></svg> That's an old version of React, because I quickly grabbed a codepen, but I'm using the latest react on my own project and it's the same issue. I get the warning about contenteditable, but even still I simply can't edit text elements in svg. 回答1: By default svg does not support contenteditable attribute. <div style="border:1px solid" > <div> Here svg has contenteditable attribute, but this does not work

Text gets set in Google Groups, post-message body but does not display?

阅读更多关于 Text gets set in Google Groups, post-message body but does not display?

问题 My extension, in a content script, writes to the subject and message body of the Google Groups "New Topic" page. The updated subject is displayed just fine; it's of input type "text", so everything is easy. The body, however, is a div representing a TextBox, and when I write to it, the update doesn't appear: (Click for a larger image.) I tried setting the focus to the field first, but that had no effect. 回答1: How are you trying to set the text? Show your code! A typical way to initially set a

Firefox - how to get selected text when using double click

阅读更多关于 Firefox - how to get selected text when using double click

问题 I created a contentEditable div with a text portion and a link. Double clicking the link will select the link text. <div contentEditable="true"> This is a text and <a href="http://www.google.com">This_is_a_link</a> </div> Afterwards calling document.getSelection().getRangeAt(0).startContainer will return the div: // => <div contenteditable="true"> Instead of the link. I cannot find a way to find which part of the div is selected. See this jsfiddle (double click the "This_is_a_link" and there

span contenteditable width won't work

阅读更多关于 span contenteditable width won't work

问题 When the span tag is used with the attribute contenteditable="true" then it ignores all width css <span contenteditable="true" style="width:400px;border:1px solid black;"> Content filler </span> The above produces this Does anybody know how to make it so the box doesn't conform to the text like this and follows regular CSS? 回答1: span is a display:inline element. Width doesn't work on inline elements. Apply either display:inline-block; or display:block; to the span. 来源： https://stackoverflow

Browser automatically inserts unwanted code on enter in contenteditable div

阅读更多关于 Browser automatically inserts unwanted code on enter in contenteditable div

问题 I've got a contenteditable div with an ul and some li's in it. Now if I want to add some more text behind the list, I place the cursor after the last li ("3") and hit enter twice. After the first enter it adds a new li and after the second enter it closes the ul and adds a div with a br inside it so that I can start to write in it. (Example #1) Expected code: <div contenteditable="true"> <p>Test</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul><div><br></div> </div> This is the expected

How do i customize hallo.js to use <strong> instead of <b>?

阅读更多关于 How do i customize hallo.js to use instead of ?

问题 The question pretty much says it all. Im using hallo.js and it seems to use <b> and <i> for bold and italic. Some of my markup currently requires strong and em in order to have certain CSS rules apply. I also prefer strong and em in general to b and i so Id like to configure this. There doesnt seem to be any documentation on this directly - can it be done? 回答1: This can't be done as the markup is not up to hallo.js or any other rich text editor. They just trigger inserting markup, but the

window.getSelection() for contenteditable div on click

阅读更多关于 window.getSelection() for contenteditable div *on click*

问题 I have a contenteditable div and want to get the user's selection when they click a span . My problem is that when I click the span , the selection gets unselected so window.getSelection().toString() returns '' . How can I get this to work on click of a span ? I know the actual getSelection() works, because if I wrap window.getSelection().toString() in a setTimeout of 5 seconds, after 5 seconds, I get the selected text! My code: $('#btn').click(function() { console.log(window.getSelection()

window.getSelection() for contenteditable div on click

阅读更多关于 window.getSelection() for contenteditable div *on click*

Reliable cross-browser info on ContentEditable

阅读更多关于 Reliable cross-browser info on ContentEditable

问题 I am looking for a list of web browsers that fully support using ContentEditable. I know that I.E has supported it since 5 or 5.5, but what about other browsers. I know that the modern versions of Chrome, Flock, Maxthon, Opera and I.E support it. But I don't care about the modern browsers. What about the older versions of them, like I.E 6/7/8, Safari, Firefox, Avast, etc etc? I can't find any useful information on this. Does anybody know? Thanks! 回答1: The WHATWG blog provides reliable