DIV contentEditable上的getSelection

时间:2010-04-26 12:10:04

标签: javascript editor wysiwyg selection

我正在尝试实现项目,我必须在JavaScript中使用WYSIWYG编辑器。我无法使用现有的编辑器,因为我需要使用我的插件(例如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)。

我能做些什么呢?

1 个答案:

答案 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