gpt4 book ai didi

javascript - DIV 内容上的 getSelectionEditable

转载 作者:行者123 更新时间:2023-11-29 15:53:35 25 4
gpt4 key购买 nike

我正在努力实现项目,我必须用 JavaScript 做一个所见即所得的编辑器。我无法使用现有的编辑器,因为我需要使用我的插件(例如 colorPickerimagePicker)。

现在我有这个 HTML:

<div class="K_editor" id="idExample">
<div class="K_links">
<div class="K_editor_link K_editor_linkBold">B</div>
<div class="K_editor_link K_editor_linkItalic">I</div>
<div class="K_editor_link K_editor_linkUnderline">U</div>
</div>
<iframe width="696" height="212" frameborder="0" src="js/myEditor_iFrame.php">
<html>
<head/>
<body>
<div id="contentIframe" contenteditable="true">
This is a test code, with <strong>bold</strong> text and <em>italic</em> text.
</div>
</body>
</html>
</iframe>
<input type="submit"/>
</div>

在事件中点击 .K_editor_link , 一个函数是用参数打开的:

  • tagStart (例如 <u><span style="color:#AB1;"> )
  • tagEnd (例如 </u></span> )
  • id (此处为 idExample)

我知道在 Textarea 上获得选集但是setSelectionRange() , .selectionStart.selectionEnd仅适用于 textbox (XUL), input (XHTML) 或 textarea (XHTML)。

我能做什么?

最佳答案

这是我使用的代码。自从几个月前我在 SO 上找到它以来,我不能相信它。不记得在哪里。希望它对你有用。

function getSelectionHtml() 
{
var html = "";

if (typeof window.getSelection != "undefined")
{
var sel = window.getSelection();
if (sel.rangeCount)
{
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;

}

代码来自这个问题:window.getSelection return html

关于javascript - DIV 内容上的 getSelectionEditable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2713270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com