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

Ext JS开发大全

CmsWing

第12章[12.10]富文本编辑器 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 视图类文件。内容如下：

` 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 = "<div style='height:500px' id='" + this.getId() + "'></div>";
            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在国内访问可能比较慢。
页面效果截图：
![](https://img-blog.csdnimg.cn/20210228132539205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29zY2FyOTk5,size_16,color_FFFFFF,t_70)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

第12章[12.10]富文本编辑器 CKEditor与Ext JS的整合

网站导航