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