1. 程式人生 > >ExtJs整合ckeditor文字編輯器

ExtJs整合ckeditor文字編輯器

話說ExtJs對於管理類的系統還是很實用的,但是再好的框架也不一定涵蓋所有我們想要實現的功能,今天,我就將之前碰到的問題解決並分享給大家。

廢話不多說,直接步入正題。

1、首先去網上下載ckeditor文字編輯器並引入需要的檔案,再確定將ckeditor文字編輯器放到哪個位置、然後通過ExtJs引用觸發即可

2、附上我已實現的程式碼

/**
 * 新增修改表單
 */
Ext.define('app.view.tool.UpdateTeamTextWin',{
    extend:'Ext.window.Window',
    alias:'widget.updateteamtextwin',
    title : "Team",
 id : "updateteamtextwin",
 alias : "widget.updateteamtextwin",
 width : 820,
 height : 500,
 border:false,
    isSelect : true,
 //autoScroll : true,// 自動滾動條
 closable : true,
 closeAction : "destroy",
 modal : true,//為真 當顯示時,製作視窗模板並且掩飾他背後的一切,為假時顯示它除了限制訪問其他UI元素。
 
    //新增富文字編輯器ckeditor
    addCkEditor:function(type){
        var me = this;
       // CKEDITOR.appendTo('newsckeditor');
        CKEDITOR.replace( 'newsckeditor',{
            height: 240,
            width:760,
            //如果選擇字型樣式等的彈出視窗被當前window擋住,就設定這個為一個較大的值
            baseFloatZIndex: 99999
            //圖片和flash都上傳到這裡
            //filebrowserUploadUrl: '/news/upload'
        });
      
    },
    initComponent: function() {
        //this.query('textfield[name=id]')[0].setValue(1);
           //CKEDITOR.instances.newsckeditor.setData("111111");
          // this.query('hidden[name=filePath]')[0].setValue("2222");
        Ext.applyIf(this, {
           // loader:loader,
            defaults:{
                margin:'10 10 10 10',
                anchor:'100%'
            },
            items: [
                {
                 xtype : "textfield",
         fieldLabel : "TeamID",
         allowBlank : true,
         hidden:true,
         name : "id",
         id : "updateteamtext.id"
                },{
                    xtype:'panel',
                    autoScroll:true,
                    height:350,
                    widht:800,
                    border:false,
                    html:'<div id="newsckeditor" name="newsckeditor"></div>'
                }
            ],
            buttons: [
                {
                    text: 'Save',
                    id: 'updateteamtextwin_save',
                    formBind: true
                },{
                    text: 'Reset',
                    id: 'updateteamtextwin_reset',
                    formBind: true
                }
            ]
        });
        this.callParent(arguments);
    }

});