最近在折腾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格式,但没办法很好的还原
例如原本是这样的:
转化为html格式文件之后:
结果:
很感人!首先把word转化为html文件格式,会发现word有自己的渲染内核 样式会加mso前缀,类似-webkit- -ms- 这种,而且添加了很多平时少见的样式。
查看源码:
复制到ckeditor之后,就变成
显然是被过滤了.... 查了很多办法,插件页面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出来,不过滤。 这样就所有标签都齐了.没办法中的办法
后续会添加