FckEditor在Extjs中的使用

来源：互联网发布：usb通信测试软件编辑：程序博客网时间：2024/05/22 20:28

一：工具栏的设置：

打开fckeditor目录下面的fckconfig.js文件，找到FCKConfig.ToolbarSets["Default"]代码：

       FCKConfig.ToolbarSets["Default"] = [       ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],       ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],       '/',       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],       ['OrderedList','UnorderedList','-','Outdent','Indent'],       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],       ['Link','Unlink','Anchor'],       ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],       '/',       ['Style','FontFormat','FontName','FontSize'],       ['TextColor','BGColor'],       ['FitWindow','-','About']]

在默认情况下，FCKeditor会调用上面定义的工具栏按钮，可以根据自己的需求，定义自己用的工具栏。下面是可以配置的功能：

二：在extjs中的使用

可以创建一个非默认的工具栏按钮设置，在fckconfig.js中复制FCKConfig.ToolbarSets["Default"]当中的代码，将Default改成需要定义的名字，比如“Content”。

FCKConfig.ToolbarSets["Content"] = [['Source','DocProps','-','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','HiddenField'],'/',['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],['OrderedList','UnorderedList','-','SubTextIndent','AddTextIndent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],['Link','Unlink','Anchor'],['Image','Table','Rule','SpecialChar','PageBreak','Smiley'],'/',['Style','FontFormat','FontName','FontSize'],['TextColor','BGColor','FitWindow']] ;

Extjs中使用这个编辑器：

      new Ext.TabPanel({    region: 'center',    margins:'3 3 3 0',     activeTab: 0,    defaults:{autoScroll:true},            items:[{        title: '直播内容',        items:[{            xtype: 'panel',            header: false,            border: true,                    frame: true,            autoScroll: true,            autoHeight:true,            anchor:'95%',            region: 'center',            items: [{                id:'my_content',                xtype: 'fckeditor',                ttype: 'Content',//对应fckconfig.js中的配置，表示我们使用的工具栏                allowBlank :false,                columnName: 'IMAGES',                fullPage: false,                hideLabel: true,                name: 'content.fields.CONTENT',                id:'name',                width: '100%',                  height: 250,                                      }]        }]       }]     })

效果：

0 0