我正在尝试实现项目,我必须在JavaScript中使用WYSIWYG编辑器。我无法使用现有的编辑器,因为我需要使用我的插件(例如colorPicker
或imagePicker
)。
现在我有这个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)。
我能做些什么呢?
答案 0 :(得分:1)
这是我使用的代码。自从几个月前我在这里发现它以来,我无法赞美它。不记得在哪里。希望它适合你。
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