如何让CKEditor获取的富文本内容在console.log中输出为单行HTML字符串

问题原因 #

CKEditor 默认调用getData()方法时，会自动对输出的HTML内容添加换行、缩进做格式化处理，提升可读性，所以控制台输出会是多行结构。

解决方法 #

方法1：单次调用时禁用格式化（推荐）

仅在需要获取单行HTML的getData调用时传入参数，不影响编辑器其他功能的输出格式，修改你的updateDiv函数代码如下：

function updateDiv(){
    // 传入format_output: false参数关闭输出格式化，直接返回无多余换行的单行HTML
    var editorText = CKEDITOR.instances.editor1.getData({ format_output: false });
    console.log(editorText);
}

方法2：全局配置默认输出单行

如果所有场景下获取编辑器内容都需要单行格式，可以在初始化编辑器时添加全局配置：

CKEDITOR.replace( 'editor1', {
    height: 300,
    filebrowserUploadUrl: "/eokclaim/app/ajaxfile.php?type=file",
    filebrowserImageUploadUrl: "/eokclaim/app/ajaxfile.php?type=image",
    // 全局关闭输出格式化，所有getData调用默认返回单行HTML
    format_output: false
} );

兜底方案

如果配置后还有残留的换行符、制表符，可以用正则做二次替换彻底清除：

var editorText = CKEDITOR.instances.editor1.getData({ format_output: false });
// 替换所有换行/回车/制表符为空
editorText = editorText.replace(/[\r\n\t]/g, '');
console.log(editorText);

内容的提问来源于stack exchange，提问作者David Holly