如何在ckeditor中获取所选文本的html源

Question

假设我在ckeditor中写了5行，并且选择了第二行和第三行。 如何获取所选文本的html源。假设将始终连续选择代码。

Answer 1

function getSelectionHtml()
{
editor=CKEDITOR.instances.editor1;
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());
}
  console.log("OrgHtml:\n"+el.getHtml());
  return el.getHtml();
}

使用此功能获取所选文本的InnerHtml值。我也在使用此功能。

Answer 2

所有选定的HTML节点-CKEditor

注意：这完全取决于ckeditor中的当前数据结构。 如果您选择了标签内的文本，并且部分选择了文本，则将返回完整标签。

注意例如：

<p>my ckeditor text</p> enclosed in a p-tag

如果您选择了“编辑器”，则完整的p标签将返回，因为您说您需要HTML而不是选定的文本。

码：

var range = editor.getSelection().getRanges()[0] //editor is instance of your ck-editor
var selectedHTML = [];
console.log(range.startPath().elements[0].$, 'first')
selectedHTML.push(range.startPath().elements[0].$)
var selectedSibling = "";
if(range.startPath().elements[0].$ != range.endPath().elements[0].$) {
    selectedSibling = range.startContainer.$.parentNode.nextElementSibling
    while(selectedSibling && (selectedSibling != range.endPath().elements[0].$)) {
        console.log(selectedSibling, 'next')
        selectedHTML.push(selectedSibling)
        selectedSibling = selectedSibling.nextElementSibling
    }
    console.log(range.endPath().elements[0].$, 'last')
    selectedHTML.push(range.endPath().elements[0].$)
}
console.log(selectedHTML, 'selected HTML  Tags')

Answer 3

您可以通过以下方式获得主动选择

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());
    }
    text = container.innerHTML;
}

您选择的HTML将存储在可变text 。