contenteditable

Get element node at caret position (in contentEditable)

由 蹲街弑〆低调 提交于 2020-01-09 03:26:44
问题 Let's say I have some HTML code like this: <body contentEditable="true"> <h1>Some heading text here</h1> <p>Some text here</p> </body> Now the caret (the blinking cursor) is blinking inside the <h1> element, let's say in the word "|heading" . How can I get the element the caret is in with JavaScript? Here I would like to get node name: "h1" . This needs to work only in WebKit (it's embedded in an application). It should preferably also work for selections. 回答1: Firstly, think about why you're

jquery - consolidate stacked DOM elements

由 大城市里の小女人 提交于 2020-01-05 09:05:39
问题 I have HTML that was formatted via a contenteditable div. I am wanting to make it more concise, modern HTML. I can easily replace any b, strong, em, font, etc tags and replace them with spans, but the result produced "stacked" elements. For instance, I might have: <span style="font-weight:bold"> <span style="text-decoration:underline">some text</span> </span> And I want to see: <span style="font-weight:bold; text-decoration:underline">some text</span> The hard part is it would need to handle:

Losing selected text from contenteditable on clicking div with css user-select: none;

由 此生再无相见时 提交于 2020-01-05 07:29:30
问题 I'm developing a JavaScript rich text editor. Instead of buttons, I'm using div with css property user-select: none . This works fine in Firefox but problem is with Google Chrome . When I click on div with css user-select: none , I'm losing the selected text from contenteditable div. Html and css is given below <div id="editor"> <div id="controls"> <div id="button-bold"></div> </div> <div id="rte" contenteditable></div> </div> CSS #button-bold { width: 20px; height: 20px; padding: 2px; float:

Set Cursor After an element

由 末鹿安然 提交于 2020-01-05 05:19:21
问题 I have this code elementSpan = document.createElement('span').className = 'mainSpan'; elementSpan.innerHTML = '<span class="childSpan">A</sapn>'; range.insertNode(elementSpan); range.setStartAfter(elementSpan); //the problem am having Now I set the cursor to be after the elementSpan after inserting it into a contenteditable div but instead of the cursor to be after the elementSpan , it goes after the text A which is inside the <span class="childSpan"> but I want it to be after the elementSpan

safari - contenteditable, after making it empty, creates an element with text-align:center

由 。_饼干妹妹 提交于 2020-01-04 08:23:34
问题 In safari, i had a simple edtable div with a input button, on deletion of the element (backspace or delete), caret moves to center of edtiable div with some inline styled p tag with text-align:center and inline style "color" <div class="editable" contenteditable="true"> <input type="button" value="inputBtn" /> </div> http://jsfiddle.net/VqCvt/ its a strange behavior observed only in safari. 回答1: Over a year after this post, this issue is still a problem. This issue is directly tied to the

Disable new blockquote contenteditable

由 左心房为你撑大大i 提交于 2020-01-03 05:23:10
问题 Disable new blockquote if Enter keypress on COntentent editable javascript or jQuery HTML <div id="demo" contenteditable="true"> <p>This is a paragraph. Lorem Ipsum...</p> <blockquote>This is a blockquote. Enter here</blockquote> </div> CSS blockquote { background: beige; padding: 10px; border: 2px dashed #dadada; } Snippet blockquote { background: beige; padding: 10px; border: 2px dashed #dadada; } <div id="demo" contenteditable="true"> <p>This is a paragraph. Lorem Ipsum...</p> <blockquote

Getting the last entered word from a contentEditable div

由 孤街醉人 提交于 2020-01-03 04:59:06
问题 I have a div tag with contenteditable set to true. I am trying to find out the last entered word in the div. For example, if I type in This is a test and I hit a space, I want to be able to get the word test I want to be able to use this logic so that I can test each word being typed (after the space is pressed). It would be great if someone could help me with this. 回答1: An easy solution would be the following var str = "This is a test "; // Content of the div var lastWord = str.substr(str

document.queryCommandValue returns (empty string) in Firefox

由 早过忘川 提交于 2020-01-03 02:36:10
问题 I want to read if a certain text in a contenteditable element is bold or not. In Chrome document.queryCommandValue("bold") returns "true"/"false" as a string, IE returns a true/false as a boolean, but Firefox returns (empty string) in the developer console. I made a fiddle as an example: http://jsfiddle.net/nTQd2/ If you write som text in the div, mark it and then hit "Bold" the span should show "true"/"false" or true/false . I don't really care if its as a string or a boolean as I can

In ContentEditable, how can I get a reference to the element immediately preceding the caret?

由 青春壹個敷衍的年華 提交于 2020-01-03 02:01:31
问题 I am trying to write a function that will, on keyup , give me a reference to the element immediately preceding the caret in a contentEditable div. If the caret is in a text node then the function should return null . If the caret is at the start of the contentEditable then the function should return null . But if the caret is at the start of a text node, and this text node is immediately preceded by an element such as a Span, then the function should return a reference to this element. And,

Set caret position in contenteditable div layer in Chrome/webkit

由 本秂侑毒 提交于 2020-01-03 01:40:35
问题 I'm trying to set the caret position in a contenteditable div layer, and after a bit of searching the web and experimenting I got it to work in firefox using this: function set(element,position){ element.focus(); var range= window.getSelection().getRangeAt(0); range.setStart(element.firstChild,position); range.setEnd(element.firstChild,position); } [...] set(document.getElementById("test"),3); But in Chrome/webkit it selects all of the content in the div. Is this a bug with webkit or am I
订阅 contenteditable