在ckeditor中选择html

debugcn 发表于 Dev

ponayz

我正在使用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”标签包装选择时，我无法包装用户最初选择的内容

我知道这是一个经常出现的话题，但是由于我没有找到解决方法，所以……谢谢。

奥列克

使用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() );

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。