getSelection on DIV contentEditable

我正在嘗試實現項目，並且我必須在JavaScript中執行WYSIWYG編輯器。我無法使用現有的編輯器，因爲我需要使用我的插件（例如colorPicker或imagePicker）。getSelection on DIV contentEditable

現在我有這樣的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）。

我能做些什麼呢？

來源

2010-04-26 CactO_o' s

，你必須使用自己的插件真的不強迫你寫自己一個WYISWYG編輯器的事實。 CKEditor和TinyMCE允許使用自己的插件，實際上它們是圍繞一個核心構建的一組插件。 – AlfonsoML 2011-12-10 18:27:28

這是我使用的代碼。自從幾個月前我在這裏發現它之後，我無法讚揚它。不記得在哪裏。希望可以幫助你。

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

來源

2012-07-29 23:10:41 Adrian

getSelection on DIV contentEditable

回答

相關問題