[Ext JS]富文本编辑器 CKEditor与Ext JS的整合| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]富文本编辑器 CKEditor与Ext JS的整合

## 富文本编辑器 CKEditor与Ext JS的整合
Ext JS官方有提供整合Froala 的富文本编辑器组件， 不过只提供了基于Modern开发模式的。
Froala 是一个比较知名的所见即所得的富文本编辑器，有免费版本，又有一些收费的功能。不过与CKEditor相比，使用的普遍程度低于后者。本篇介绍如果整合Ext JS与CKEditor, 也就是定义基于CKEditor定义Ext JS的富文本编辑器。
### 整合步骤
这里基于Cmd开发Ext JS项目，使用经典模式开发基于PC端的应用。Ext JS的版本是7.0 。
下载CKEditor （这里下载经典版本）
下载地址： https://ckeditor.com/ckeditor-5/download/
关于CKEditor的基本介绍，可以参考
CKEditor快速介绍与入门示例
在项目中导入ckeditor文件。
在项目中创建 libs目录和ckeditor子目录，将下载的ckeditor.js文件复制到此目录下。
在index.html增加以下代码段：

在项目的classic/src/view目录下创建CKEditor.js 视图类文件。内容如下：
```javascript
 Ext.define('Osxm.view.CKEditor', {  
	 extend: 'Ext.Component',    
	 xtype: 'ckeditor', 
	 editor: null, 
	 getValue:function(){    
	 return this.editor.getData(); 
	 },  
	 listeners: {
	 afterRender: function () {   
	 var me = this;       
	 ClassicEditor.create(document.querySelector('#' + this.getId())).then(newEditor => {               me.editor = newEditor;   
	 });      
	 }   
	 },   
	 initComponent: function () {
	 this.html = "";     
	 this.callParent(arguments);  
 }});
```

### 实现思路
继承Component定义CKEditor的组件类
在initComponent配置中设置Component的HTML内容为一个带Id的div区块，CKEditor 基于该div渲染
在afterRender 事件中，创建create方法创建编辑器对象。
编辑器组件的使用
以上定义的编辑器组件可以其他的Ext JS 组件类似的方式使用，使用 new 方法或是xtype的定义方式， 类似。
    items:[{        xtype:'ckeditor',        itemId:'ckeditor'    }]

编辑器中输入的值通过getValue() 方法获取。
在线演示
地址： https://osxm.github.io/extjs_dev_ency/#ckeditordemo
备注： GitHub在国内访问可能比较慢。
页面效果截图：
![](/upload/picture/2022-10-09/upload_834c026fd68ec2e5f3411771d678baad.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]富文本编辑器 CKEditor与Ext JS的整合

网站导航