我欲封天txt下载_第12章[12.10]富文本編輯器 CKEditor與Ext JS的整合| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

第12章[12.10]富文本編輯器 CKEditor與Ext JS的整合

Ext JS官方有提供整合Froala 的富文本編輯器組件， 不過(guò)只提供了基于Modern開(kāi)發(fā)模式的。
Froala 是一個(gè)比較知名的所見(jiàn)即所得的富文本編輯器，有免費版本，又有一些收費的功能。不過(guò)與CKEditor相比，使用的普遍程度低于后者。本篇介紹如果整合Ext JS與CKEditor, 也就是定義基于CKEditor定義Ext JS的富文本編輯器。
整合步驟
這里基于Cmd開(kāi)發(fā)Ext JS項目，使用經(jīng)典模式開(kāi)發(fā)基于PC端的應用。Ext JS的版本是7.0 。
下載CKEditor （這里下載經(jīng)典版本）
下載地址： https://ckeditor.com/ckeditor-5/download/
關(guān)于CKEditor的基本介紹，可以參考
CKEditor快速介紹與入門(mén)示例
在項目中導入ckeditor文件。
在項目中創(chuàng  )建 libs目錄和ckeditor子目錄，將下載的ckeditor.js文件復制到此目錄下。
在index.html增加以下代碼段：

在項目的classic/src/view目錄下創(chuàng  )建CKEditor.js 視圖類(lèi)文件。內容如下：

` 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);
        }
    });
    `
    
    
實(shí)現思路
繼承Component定義CKEditor的組件類(lèi)
在initComponent配置中設置Component的HTML內容為一個(gè)帶Id的div區塊，CKEditor 基于該div渲染
在afterRender 事件中，創(chuàng  )建create方法創(chuàng  )建編輯器對象。
編輯器組件的使用
以上定義的編輯器組件可以其他的Ext JS 組件類(lèi)似的方式使用，使用 new 方法或是xtype的定義方式， 類(lèi)似。

items:[{
            xtype:'ckeditor',
            itemId:'ckeditor'
        }]
    
編輯器中輸入的值通過(guò)getValue() 方法獲取。
在線(xiàn)演示
地址： https://osxm.github.io/extjs_dev_ency/#ckeditordemo
備注： GitHub在國內訪(fǎng)問(wèn)可能比較慢。
頁(yè)面效果截圖：
![](https://img-blog.csdnimg.cn/20210228132539205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29zY2FyOTk5,size_16,color_FFFFFF,t_70)

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

第12章[12.10]富文本編輯器 CKEditor與Ext JS的整合

網(wǎng)站導航