ExtJs整合ckeditor文本编辑器

来源：互联网发布：装完ubuntu进不去win10 编辑：程序博客网时间：2024/06/02 22:08

话说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);
    }

});

0 0