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出来,不过滤。 这样就所有标签都齐了.没办法中的办法

后续会添加

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3 119
  • 每一位都是上帝的恩典…… 每一个都是上帝的宠儿……
    李先生_bcaf阅读 1,319评论 0 1
  • 张爱玲在《沉香屑·第一炉香》里做过一个有趣的比喻:上海女人像荷叶粉蒸肉,广东女人像糖醋排骨。 在她眼中,上海女人既...
    物道阅读 369评论 0 4
  • 逢入京使 岑参 故园[1]东望路漫漫[2], 双袖龙钟[3]泪不干。 马上相逢无纸笔, 凭[4]君传语报平安。 注...
    古诗新读阅读 632评论 0 2
  • 读书会,第一次参加。培蕊极力邀约,提前一天就从大场来到胶南,又是弄头发又是买新衣服,看样子比过年还兴奋。我也深受感...
    曦华阅读 130评论 0 0