清除dom元素ckeditor標簽

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));
     });
});