Question

我有问题;当我将ckeditor附加到一个元素，然后尝试使用dom元素检索html我得到脏标记。是否有一些ckeditor函数可以清除该标记，还是需要创建自定义的东西？

示例代码：

$(".editor").each(function(){
    $(this).attr('contenteditable','true');
    var test = CKEDITOR.inline(this);
    test.on( 'blur', function( evt ) {
        $.post(window.location.href, { task: "change-content", html: $(".content-container")[0].outerHTML })
          .done(function( data ) {
              //window.location.reload();
        }.bind(this));
     });
});

html代码原文：

<div class="content-container">
<div class="editor">First editor</div>
<div class="editor">Second editor</div>
<div class="editor">Third editor</div>
</div>

使用函数

检索html

<div class="content-container">
<div class="editor cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_102" style="position: relative;" contenteditable="true">First editor</div>
<div class="editor cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_102" style="position: relative;" contenteditable="true">Second editor</div>
<div class="editor cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_102" style="position: relative;" contenteditable="true">Third editor</div>
</div>

是否有一些ckeditor函数可以从dom元素中清除这些标记？或者我应该创建一个自定义函数？

更新

愚蠢的解决方案：

        var text = $(".content-container")[0].outerHTML;
        text = text.replace(/ cke_editable/g, "");
        text = text.replace(/ cke_editable_inline/g, "");
        text = text.replace(/ cke_contents_ltr/g, "");
        text = text.replace(/ cke_show_borders/g, "");
        text = text.replace(/ contenteditable=\"true\"/g, "");
        text = text.replace(/ tabindex=\"0\"/g, "");
        text = text.replace(/ spellcheck=\"false\"/g, "");
        text = text.replace(/ role=\"textbox\"/g, "");

        text = text.replace(/ aria-label=\"Rich Text Editor, editor\d+\"/g, "");
        text = text.replace(/ title=\"Rich Text Editor, editor\d+\"/g, "");
        text = text.replace(/ aria-describedby=\"cke_\d+\"/g, "");

        text = text.replace(/ style=\"position: relative;\"/g, "");
        text = text.replace(/editor_inline\"/g, "editor");

如果有人有更好的解决方案可以自由添加到这里：）

Answer 1

您应该使用evt.editor.getData() - 它会为您提供已清理的HTML。

$(".editor").each(function(){
    $(this).attr('contenteditable','true');
    var test = CKEDITOR.inline(this);
    test.on( 'blur', function( evt ) {
        $.post(window.location.href, { 
            task: "change-content", 
            html: evt.editor.getData() 
        })
          .done(function( data ) {
              //window.location.reload();
        }.bind(this));
     });
});

更新

如果您需要合并所有可以使用的编辑器的内容：

finalHtml = ''
for (var instanceName in CKEDITOR.instances) {
    finalHtml += CKEDITOR.instances[instanceName].getData();
}

您可以将此代码放入test.on( 'blur', function( evt ) {事件中，并将完整内容发送到您的服务器（使用$.post功能）：

$(".editor").each(function(){
    $(this).attr('contenteditable','true');
    var test = CKEDITOR.inline(this);
    test.on( 'blur', function( evt ) {
        finalHtml = ''
        for (var instanceName in CKEDITOR.instances) {
            finalHtml += CKEDITOR.instances[instanceName].getData();
        }
        $.post(window.location.href, { 
            task: "change-content", 
            html: finalHtml
        })
          .done(function( data ) {
              //window.location.reload();
        }.bind(this));
     });
});

html dom元素ckeditor标签清理

1 个答案:

更新