Contenteditable显示最后插入的html元素

本文介绍了Contenteditable显示最后插入的html元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 我使用contenteditable div作为输入字段来键入一些文本并通过该文本中的按钮（小html图片）插入图标。 只要文本比contenteditable字段窄，没关系。 一旦文本比字段长（所以它被部分隐藏）： 当我输入一个文本字符时，它也很好，最后一个字符会在按下这个键后自动显示出来，这样您就可以随时查看您正在输入的内容。 但是当我通过按钮输入一个图标时，图标就没有问题，但是它隐藏着，因为字段内容不会移动以使新输入的图标可见，直到我输入另一个文本字符。 任何解决方案，以便输入的最后一个元素（text或html）对用户始终可见？ function pasteIcon（html）{var sel，range; if（window.getSelection）{sel = window.getSelection（）; if（sel.getRangeAt& sel.rangeCount）{range = sel.getRangeAt（0）; range.deleteContents（）; var el = document.createElement（div）; el.innerHTML = html; var frag = document.createDocumentFragment（），node，lastNode; while（（node = el.firstChild））{lastNode = frag.appendChild（node）; } range.insertNode（frag）; if（lastNode）{range = range.cloneRange（）; range.setStartAfter（lastNode）; range.collapse（真）; sel.removeAllRanges（）; sel.addRange（范围）; （document.selection&& document.selection.type！=Control）{document.selection.createRange（）。pasteIcon（html）;点击（功能（）{$（'。contEd'）。focus（）; pasteIcon（'< img class =icOn src =http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png>'）;}）}）; [contenteditable =true] {display：inline;白色空间：nowrap;溢出：隐藏！重要;文本溢出：继承; -webkit-user-select：text！important; -moz-user-select：text！important; -ms-user-select：text！important; user-select：text！important;} [contenteditable =true] br {display：none;} .container {display：flex;} .buttOn {width：24px;身高：24px; border：none;背景：＃666; color：white;}。contEd {height：22px; text-align：center;宽度：100px; line-height：23px;颜色：黑色; font-size：10.5px; font-family：arial; border：1px solid black;}。icOn {width：9px;身高：13px; top：1px; position：relative;} < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =contAiner> < input class =buttOntype =buttonvalue =B> < div class =contEdcontenteditable =truespellcheck =falseautocomplete =off>< / div>< / div> 以下是 jsFiddle 这里是原始线程我使用了pasteIcon功能。 触发一个键码39（右箭头），在pasteIcon函数后面，以模拟按键，但它不起作用。 解决方案您可以将编辑器滚动至插入的图标。移动选区后，请注意两行代码。希望它能像你期望的那样工作：） 更新： 为了覆盖所有的情况，我们需要检查是否插入的图像在编辑器边界内或外部。 首先，让我们将id添加到编辑器元素中，以便更轻松地找到它。然后我们可以利用函数getBoundingClientRect在屏幕上返回一个实际元素的矩形。最后，我们比较矩形，如果图像矩形不在编辑器内部（imgRect.left< editorRect.left || imgRect.right> editorRect.right），那么我们滚动。 $ b $在调查最新评论中描述的问题的过程中，我发现在经过一定长度的编辑内容后，jQuery函数'offset'返回的结果并不准确结果。最有可能的是，这是因为在这种情况下，编辑器的左侧偏移量不会自动更新。 最后，我将所需的滚动位置计算更改为图像DOM元素的offsetLeft减去编辑元素的offsetLeft减1（边框尺寸），现在它可以在任何内容长度下正常工作。 function pasteIcon（html）{var sel，range; if（window.getSelection）{sel = window.getSelection（）; if（sel.getRangeAt& sel.rangeCount）{range = sel.getRangeAt（0）; range.deleteContents（）; var el = document.createElement（div）; el.innerHTML = html; var frag = document.createDocumentFragment（），node，lastNode; while（（node = el.firstChild））{lastNode = frag.appendChild（node）; } range.insertNode（frag）; if（lastNode）{range = range.cloneRange（）; range.setStartAfter（lastNode）; range.collapse（真）; sel.removeAllRanges（）; sel.addRange（范围）; var editorRect = $（contEdit）[0] .getBoundingClientRect（）; var imgRect = $（lastNode）[0] .getBoundingClientRect（）; if（imgRect.left< editorRect.left || imgRect.right> editorRect.right）{var actualLeft = $（lastNode）[0] .offsetLeft - editorRect.left - 1; $（ contEd）。scrollLeft（actualLeft）。 （document.selection&& document.selection.type！=Control）{document.selection.createRange（）。pasteIcon（html）;}}}}}点击（功能（）{$（'。contEd'）。focus（）; pasteIcon（'< img class =icOn src =http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png>'）;}）}）; [contenteditable =true] {display：inline;白色空间：nowrap;溢出：隐藏！重要;文本溢出：继承; -webkit-user-select：text！important; -moz-user-select：text！important; -ms-user-select：text！important; user-select：text！important;} [contenteditable =true] br {display：none;} .container {display：flex;} .buttOn {width：24px;身高：24px; border：none;背景：＃666; color：white;}。contEd {height：22px; text-align：center;宽度：100px; line-height：23px;颜色：黑色; font-size：10.5px; font-family：arial; border：1px solid black;}。icOn {width：9px;身高：13px; top：1px; position：relative;} < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =contAiner> < input class =buttOntype =buttonvalue =B> < div id =contEditclass =contEdcontenteditable =truespellcheck =falseautocomplete =off>< / div>< / div> I use a contenteditable div as an input field to type some text and insert icons via a button (small html pictures) within that text.As long as the text is narrower than the contenteditable field, it's fine.Once the text is longer than the field (so it's partially hidden):when I enter a text character, it's all good too, the last character is automatically shown after the key is pressed so that you can always see what you are typing.But when I enter an icon via the button, then the icon is there alright but it's hidden as the field content doesn't move to make the newly entered icon visible, until I enter another text character.Any solution to this so that the last element entered (text or html) is always visible to the user?function pasteIcon(html) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { document.selection.createRange().pasteIcon(html); }}$(document).ready(function() { $('.buttOn').click(function() { $('.contEd').focus(); pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">'); })});[contenteditable="true"] { display: inline; white-space: nowrap; overflow: hidden !important; text-overflow: inherit; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important;}[contenteditable="true"] br { display: none;}.contAiner { display: flex;}.buttOn { width: 24px; height: 24px; border: none; background: #666; color: white;}.contEd { height: 22px; text-align: center; width: 100px; line-height: 23px; color: black; font-size: 10.5px; font-family: arial; border: 1px solid black;}.icOn { width: 9px; height: 13px; top: 1px; position: relative;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="contAiner"> <input class="buttOn" type="button" value="B"> <div class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div></div>Here is the jsFiddleAnd here is the original thread I took the "pasteIcon" function from.PS: I tried to trigger a keycode 39 (right arrow), just after the pasteIcon function in order to simulate a keypress but it just didn't work. 解决方案 You can just scroll your editor to the inserted icon. Pay attention on two lines of code just after you move selection. Hope it works as you expected :)UPDATE:To cover all the cases we need to check whether inserted image is in or out the editor bounds.First, let's add id to the editor element just to find it more easy. Then we can utilize the function getBoundingClientRect returning an actual element's rectangle on the screen. Finally, we compare the rectangles and if the image rectangle is not inside the editor (imgRect.left < editorRect.left || imgRect.right > editorRect.right) then we scroll.UPDATE 2:During the investigation of the problem described in the latest comments I found that after certain length of edited content jQuery function 'offset' returns not accurate results. Most probably, it's because the editor's leftOffset is not automatically updated in this circumstances.Finally, I changed the desired scroll position calculation to image DOM element's offsetLeft minus editor element's offsetLeft minus 1 (border size) and now it works fine with any content length.function pasteIcon(html) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); var editorRect = $(contEdit)[0].getBoundingClientRect(); var imgRect = $(lastNode)[0].getBoundingClientRect(); if (imgRect.left < editorRect.left || imgRect.right > editorRect.right) { var actualLeft = $(lastNode)[0].offsetLeft - editorRect.left - 1; $(".contEd").scrollLeft(actualLeft); } } } } else if (document.selection && document.selection.type != "Control") { document.selection.createRange().pasteIcon(html); }}$(document).ready(function() { $('.buttOn').click(function() { $('.contEd').focus(); pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">'); })});[contenteditable="true"] { display: inline; white-space: nowrap; overflow: hidden !important; text-overflow: inherit; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important;}[contenteditable="true"] br { display: none;}.contAiner { display: flex;}.buttOn { width: 24px; height: 24px; border: none; background: #666; color: white;}.contEd { height: 22px; text-align: center; width: 100px; line-height: 23px; color: black; font-size: 10.5px; font-family: arial; border: 1px solid black;}.icOn { width: 9px; height: 13px; top: 1px; position: relative;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="contAiner"> <input class="buttOn" type="button" value="B"> <div id="contEdit" class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div></div> 这篇关于Contenteditable显示最后插入的html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..