強大的富文字編輯器 CKEditor

提到富文字編輯器，可能前端童鞋並不陌生。今天我要推薦的富文字編輯器就是 ckeditor ，趁著最近專案的使用熱勁，整理一些實用筆記，以備不時之需。

一、快速構建

二、簡單使用

123

4567
891011
1213
1415
1617
1819
20

三、關於外掛程式

四、ckeditor 獲取 dom 資料

123

45

// 獲取資料：

let operatestate = editor.getdata();
// 設定資料
editor.setdata(operatestate);

五、ckeditor 去除貼上樣式

123

4567

// all content will be pasted as plain text.

config.forcepasteasplaintext = true;
// only microsoft word content formatting will be preserved.
config.forcepasteasplaintext = 'allow-word』;

六、ckeditor 監聽 undo 和 redo 事件

123

4567
8910

editor.on('beforecommandexec', function(e)

if(e.data.name === 'redo') 
});

七、ckeditor 如何處理撤回操作

場景：使用者操作後，需要撤銷之前的操作，做一次回退，但不能保留程式**的過程。

1

2

var data = editor.getsnapshot();

editor.loadsnapshot( data );

八、設定游標位置

123

4567
8

editor.focus();

var selection = editor.getselection();
var range = selection.getranges()[0];
var pcon = range.startcontainer.getascendant(,true); //getascendant('p',true);
var newrange = new ckeditor.dom.range(range.document);
newrange.movetoposition(pcon, ckeditor.position_before_start);
newrange.select();

九、事件監聽

123

4567
891011
1213
1415
1617

// on change listener for cke ( source mode not supported )

editor.on( 'change', function() );
// kludge onchange listener for cke source mode
editor.on( 'mode', function()  );
}} );

十、遞迴獲取元素節點

123

4567
891011
1213

function

gettextnodes(element) 
}gettextnodes(jartto_root_test);

一、如何處理選中的文字 text

123

456

// jartto's demo

var jartto = oeditor.getselection().getranges()[0].extractcontents();
var container = ckeditor.dom.element.createfromhtml("", oeditor.document);
oeditor.insertelement(container);

二、增加快捷鍵操作

123

4567
891011
1213
1415

// jartto's demo

( function() ;
var style = new ckeditor.style(format);
}} );
editor.setkeystroke( ckeditor.alt + 49 , 'h1' ); // alt + 1
}});
} )();

三、學習建議

十四、ckeditor4 和 ckeditor5

更多細節請參考：the ckeditor 5 and ckeditor 4 comparison。

十五、資源彙總

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...