Question

假设我在ckeditor中写了5行，我选择了第2行和第3行。如何获取所选文本的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

如果您选择＆＃34;编辑器＆＃34; ，则完成 p-tag 将返回，因为您说您需要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。

中

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

3 个答案: