Question

我正在使用CKEditor为引文插入标记（脚注）。我编写了一个CKEditor插件，允许用户单击CKEditor实例中的按钮并输入新引文或选择现有引文。标记是使用jQuery构建的：

    // see http://www.w3.org/TR/html5/common-idioms.html#footnotes
    var $cite = $("<sup>").append($("<a>").attr("href", "#").attr("data-citationid", citationId).html("[" + citationId + "]"));
    editor.insertHtml($cite.get(0).outerHTML);

其中data-citationid引用数据库中的引用ID。问题是Chrome中插入的标记不同（23.0.1271.97 m）。

Firefox（17.0.1）和IE（9.0.8112.16421）插入所需的

<sup><a data-citationid="26" href="#">[26]</a></sup>

但Chrome会删除<sup>标记并插入

<a data-citationid="26" href="#" style="vertical-align: super;">[26]</a>

我的问题是：

我可以构建标记，以便始终根据需要进行渲染吗？
浏览器或CKEditor是否更改了标记？

Answer 1

.outerHTML是本机JS而不是jquery，它的实现可能会有所不同。尝试将其包装并在包装器上调用.html()，如下所示

$cite.clone().wrap('<div>').parent().html();

Answer 2

由于浏览器不一致，

insertHTML不应用于插入HTML。插入HTML的correct way是创建一个元素并调用insertElement。

这对我有用：

    var cite = "<sup><a href=\"#\" data-citationid=\"" + citationId + "\">[" + citationId + "]</a></sup>";
    var element = CKEDITOR.dom.element.createFromHtml(cite, editorInstance.document);
    editorInstance.insertElement(element);

使用jQuery构建的HTML元素在Chrome中是不同的

2 个答案: