在ckeditor中選擇html

Question

我正在使用CKEditor中的自定義鏈接生成器。 我想要做的是獲取用戶選擇的html。 我嘗試了很多東西，我的最后一個功能是

function getTheHtml(editor) {
    var selection = editor.getSelection();
    if (selection.getType() == CKEDITOR.SELECTION_ELEMENT) {
        var selectedContent = selection.getSelectedElement().$.outerHTML;
    } else if (selection.getType() == CKEDITOR.SELECTION_TEXT) {
        if (CKEDITOR.env.ie) {
            selection.unlock(true);
            selectedContent = selection.getNative().createRange().text;
        } else {
            selectedContent = selection.getNative();
        }
    }
    return selectedContent;
}

這個效果很好，但我還有問題，如果用戶選擇它可以工作的文字，如果他選擇一個圖像就可以工作但是當用戶選擇一個圖像加上一些文字我只得到文本例如這是用戶真正選擇的

 <img align="" alt="" border="0" class="donotlink" hspace="5" src="image/pic.jpg" vspace="5" />Some Random Text

這就是我從我的功能中得到的

Some Random Text

我也試過這樣做：

function getSelectionHtml(editor) {
    var sel = editor.getSelection();
    var ranges = sel.getRanges();
    var el = new CKEDITOR.dom.element("div");
    for (var i = 0, len = ranges.length; i < len; ++i) {
        el.append(ranges[i].cloneContents());
    }
    return el.getHtml();
}

但是它選擇了第一個最接近的節點，當我嘗試用“a”標簽包裝選擇時，我無法將用戶選擇的內容包裝在第一位

我知道這是一個經常出現的話題，但是因為我沒有找到如何解決...提前謝謝。

Answer 1

使用range.cloneContents（） 。 在編輯器中選擇任何內容后，在控制台中調用以下代碼：

var editor = CKEDITOR.instances.editor1,
    range = editor.getSelection().getRanges()[ 0 ],
    el = editor.document.createElement( 'div' );

el.append( range.cloneContents() );
console.log( el.getHtml() );

Answer 2

它適用於圖像和文本。

 var selection = CKEDITOR.instances.getSelection();
if (selection.getType() == CKEDITOR.SELECTION_ELEMENT) {
  var selectedContent = selection.getSelectedElement().$.outerHTML;
} else if (selection.getType() == CKEDITOR.SELECTION_TEXT) {
  if (CKEDITOR.env.ie) {
    selection.unlock(true);
    selectedContent = selection.getNative().createRange().text;
  } else {
    selectedContent = selection.getNative();
    console.log("The selectedContent is: " + selectedContent);
  }
}