CKeditor：如何在保存时平衡 HTML 标签？（他们平衡负载）

Question

我一直遇到这样的问题，即有人可能会将代码从其他地方粘贴到 CKeditor 中，使 HTML 标签处于打开状态，或者包含不应该存在的结束标签。

我注意到当视图从源更改为 HTML 时，标签是平衡的。所以这发生在加载时，当 Source 被切换时，但不会发生在保存时。

要查看实际效果，请查看源代码，输入一些带有开始标记但没有匹配的结束标记的 HTML，查看 HTML 版本，查看源代码 - 它已修复。

即使这意味着快速切换到源然后切换到 HTML，我如何在保存时触发此标签平衡？

Answer 1

我认为最好的方法是在用户切换到源代码模式时禁用提交按钮。这样您就可以避免在将数据发送到服务器之前在模式之间闪烁。请查看这个非常基本的代码笔，了解它的工作原理。

var editor = CKEDITOR.replace( 'editor1', {

} );

editor.on('instanceReady', function( event ){
  var submitBut = document.getElementById('my-submit'),
      submitWarn = document.getElementById('submit-warn');

  editor.on( 'mode', function( evt ){
    if( editor.mode == 'source') {
      submitBut.disabled = true;
      submitWarn.style.display = 'inline';
    } else{
      submitBut.disabled = false;
      submitWarn.style.display = 'none';
    }          
  });
})

live preview on codepen

Answer 2

我不确定它是否正确。当我检查 Source 按钮时，它调用函数 CKEDITOR.tools.callFunction(52, this);.

并且由于从 HTML markdown 切换到预览模式，编辑器会自动关闭标签，在保存之前，您可以切换到预览模式以强制关闭打开的标签。

var editor = CKEDITOR.replace( 'editor1', {} );

var isSourceOn = false;

function saveMyEditor() {
  if(isSourceOn)
    CKEDITOR.tools.callFunction(52, this);
}

editor.on('instanceReady', function( event ){    
  editor.on( 'mode', function( evt ){
    if(editor.mode != 'source') {
      isSourceOn = false;
    } else {
      isSourceOn = true;
    }
  });
});

Link to Codepen

编辑： 你能试试这个吗：

var editor = CKEDITOR.replace( 'editor1', {} );
editor.commands.source.exec();

正在正确切换源按钮。所以在保存之前，你可以切换到实时预览然后保存。所以它会关闭标签。

CKeditor：如何在保存时平衡 HTML 标签？（他们平衡负载）

CKeditor: How to balance HTML tags on save? (they balance on load)

javascript

ckeditor

ckeditor4.x

CKeditor：如何在保存时平衡 HTML 标签？ （他们平衡负载）

CKeditor: How to balance HTML tags on save? (they balance on load)

javascript

ckeditor

ckeditor4.x

CKeditor：如何在保存时平衡 HTML 标签？（他们平衡负载）