Ckditor使用心得

最近在折腾CKeditor4，踩下坑写下来以后有用

插件地址： https://ckeditor.com/cke4/addons/plugins/all
可以将需要的插件选择，然后在线生成 ckeditor包

配置多配置文件

//载入ckeditor
var editor = CKEDITOR.replace('ckeditor', {
    allowedContent: true,
    uploadUrl: 'xxxx',
    //customConfig: 'xxx.js'   可以定义另外的配置
});

editor.getData(); //获取富文本的内容

判断是否在编辑中

CKEDITOR.on( 'instanceReady', function( evt ) {
    var editor = evt.editor,
        body = CKEDITOR.document.getBody();
    
    editor.on( 'focus', function() {
        // Use jQuery if you want.
        body.addClass( 'fix' );
    } );
    
    editor.on( 'blur', function() {
        // Use jQuery if you want.
        body.removeClass( 'fix' );
    } );    
} );

---

其中有个需求-- 粘贴word文件时，还原word的样式

查到插件库里面有一个 pastefromword 让ckeditor支持word格式，但没办法很好的还原
例如原本是这样的：

word格式.png

转化为html格式文件之后：

html格式.png

结果：

在ckeditor后.png

很感人！首先把word转化为html文件格式，会发现word有自己的渲染内核 样式会加mso前缀，类似-webkit- -ms- 这种，而且添加了很多平时少见的样式。
查看源码：

html源码.png

复制到ckeditor之后，就变成

ckeditor.png

显然是被过滤了.... 查了很多办法，插件页面https://ckeditor.com/cke4/addon/pastefromword 并没有说什么... 倒是看到一条有用的配置 config.pasteFromWordPromptCleanup = true; 清楚样式
添加配置

config.forcePasteAsPlainText =false;
config.pasteFromWordKeepsStructure = false; 
config.pasteFromWordRemoveStyle = false;
config.pasteFromWordRemoveFontStyles = false;  

然鹅都没卵用，所以想到从word复制过来的样式的正确的，但是粘贴到ckeditor之后就会被过滤掉和整合标签，最后使用暴力的方法：
找到文件 ckeditor\plugins\pastefromword\filter\default.js

CKEDITOR.cleanWord=function(a,b){
  return a;  //添加这句
}
直接return出来，不过滤。 这样就所有标签都齐了.没办法中的办法

后续会添加