HTML dom元素ckeditor标签清理

html dom element ckeditor tag clean up

本文关键字：标签 ckeditor dom 元素 HTML      更新时间：2023-09-26

我有一个问题;当我将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 code:

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

如果有人有更好的解决方案，请在这里添加:)

你应该使用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));
     });
});
相关文章：