getSelection на DIV contentEditable - PullRequest
Новая
       16

getSelection на DIV contentEditable

3 голосов
/ 26 апреля 2010

Я пытаюсь выполнить проект, и я должен сделать WYSIWYG-редактор на JavaScript. Я не могу использовать существующий редактор, потому что мне нужно использовать мои плагины (например, 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).

Что я могу сделать для этого?

1 Ответ

1 голос
/ 30 июля 2012

Это код, который я использую.Я не могу взять кредит на себя, так как я нашел его здесь на 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

...