提到富文本编辑器,可能前端童鞋并不陌生。今天我要推荐的富文本编辑器就是 CKEditor ,趁着最近项目的使用热劲,整理一些实用笔记,以备不时之需。

一、快速构建

按照官网指南,我们可以迅速的下载到适合项目的文件包,大致分为四种:

  • 基础包
  • 标准包
  • 完整包
  • 定制包

二、简单使用

当你下载好项目文件后,使用非常简单:

  • 包含类库文件
  • 创建 textarea
  • 使用 CKEDITOR.replace() 替换存在的 textarea

参考代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"/>
</meta></head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>

三、关于插件

四、CKEditor 获取 DOM 数据

1
2
3
4
5
// 获取数据:
let operateState = editor.getData();
// 设置数据
editor.setData(operateState);

五、CKEditor 去除粘贴样式

1
2
3
4
5
6
7
// 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 事件

1
2
3
4
5
6
7
8
9
10
editor.on('beforeCommandExec', function(e){
if(e.data.name === 'undo') {
// handle before undo
console.log('jartto:undo');
}
if(e.data.name === 'redo') {
// handle before redo
console.log('jartto:redo');
}
});

七、CKEditor 如何处理撤回操作

场景:用户操作后,需要撤销之前的操作,做一次回退,但不能保留程序代码的过程。

1
2
var data = editor.getSnapshot();
editor.loadSnapshot( data );

八、设置光标位置

1
2
3
4
5
6
7
8
editor.focus();
var selection = editor.getSelection();
var range = selection.getRanges()[0];
var pCon = range.startContainer.getAscendant({p:2},true); //getAscendant('p',true);
var newRange = new CKEDITOR.dom.range(range.document);
newRange.moveToPosition(pCon, CKEDITOR.POSITION_BEFORE_START);
newRange.select();

相关文档地址:DOM Range

九、事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// on change listener for cke ( source mode not supported )
editor.on( 'change', function() {
// Debugger.log('ckeditor change event');
//do stuff
});
// kludge onchange listener for cke source mode
editor.on( 'mode', function() {
// Debugger.log('ckeditor mode change: '+ this.mode);
if ( this.mode == 'source' ) {
var editable = editor.editable();
editable.attachListener( editable, 'input', function() {
// Debugger.log('ckeditor source input change');
editor.fire('change');
} );
}
} );

十、递归获取元素节点

1
2
3
4
5
6
7
8
9
10
11
12
13
function getTextNodes(element) {
var children = element.getChildren(),child;
for (var i = children.count(); i--;) {
child = children.getItem(i);
if (child.type == CKEDITOR.NODE_ELEMENT)
getTextNodes(child);
else if (child.type == CKEDITOR.NODE_TEXT)
textNodes.push(child);
}
}
getTextNodes(jartto_root_test);

十一、如何处理选中的文本 Text

1
2
3
4
5
6
// jartto's demo
var jartto = oEditor.getSelection().getRanges()[0].extractContents();
var container = CKEDITOR.dom.element.createFromHtml("<b/>", oEditor.document);
jartto.appendTo(container);
oEditor.insertElement(container);

十二、增加快捷键操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// jartto's demo
( function() {
CKEDITOR.plugins.add( 'keystrokes', {
init: function( editor ) {
editor.addCommand( 'h1', {
exec: function( editor ) {
var format = { element: 'h1' };
var style = new CKEDITOR.style(format);
style.apply(editor.document);
}
} );
editor.setKeystroke( CKEDITOR.ALT + 49 , 'h1' ); // ALT + 1
}
});
} )();

十三、学习建议

十四、CKEditor4 和 CKEditor5

  • 高扩展性和可用性
  • 新的数据模型
  • ES6支持

更多细节请参考:The CKEditor 5 and CKEditor 4 comparison

十五、资源汇总