hb562100
14 Nov 2008, 6:00 PM
Hi all guys,
thanks to reply my post :">, so give me power to strong my code.This version solve mschwartz's problem, that my wrong.
e...,added event 'editorRender' , fix when call ownCt.doLayout().
Other, thanks mschwartz,Zig...
@Support ext's layout.
You can use ext's layout to fit the container of editor(as 'fit') ,instead of set 'Height' and 'Width'.
@Support change toolbarset dynamically.
Use setToolbarSet to do this. Code maybe like : Ext.getCmp(editor.Name).setToolbarSet('Basic');
@Support events : resize , toolSetChanged , editorRender and Ext.Component's events.
@Note
Property id doesn't work now , it will be set the same as 'Name',so you wanna to get this component ,use Ext.getCmp(Name);
Property Name , MUST be set.
The FCKeditor's direct Properties : Width,Height,ToolbarSet,Value,BasePath,CheckBrowser
The FCKeditor's Config Properties( the same as fckConfig ): refer to http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options
update 09-15-2009
BasePath is work now ,thanks 666ragez666 (http://www.extjs.com/forum/member.php?u=60841)
/**
* Class FCKeditor
* Ext & FCKeditor Integration
*
* @author <a href="mailto:hb562100@163.com">hb562100</a>
* @version 2008-12-11
* @Ext forum thread <a href=http://extjs.com/forum/showthread.php?p=263517>http://extjs.com/forum/showthread.php?p=263517</a>
*
* @extend Ext.Component
*/
/**
* @Support ext's layout.
* You can use ext's layout to fit the container of editor(as 'fit') ,instead of set 'Height' and 'Width'.
*
* @Support change toolbarset dynamically.
* Use <b>setToolbarSet</b> to do this. Code maybe like : <i>Ext.getCmp(editor.Name).setToolbarSet('Basic');</i>
*
* @Support events : resize , toolSetChanged , editorRender and Ext.Component's events.
*
* <ul>
* <li>Property id doesn't work now , it will be set the same as 'Name',so you wanna to get this component ,use Ext.getCmp(Name); </li>
* <li>Property Name , MUST be set.</li>
* <li>The FCKeditor's direct Properties : Width,Height,ToolbarSet,Value,BasePath,CheckBrowser</li>
* <li>The FCKeditor's Config Properties( the same as fckConfig ): refer to <a href="http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options">http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options</a></li>
* </ul>
*/
Ext.ux.FCKeditor = Ext.extend(Ext.Component,
{
constructor : function( conf ){
if(!conf.editor){
conf.editor
= new FCKeditor(
conf.Name
,conf.Width
,conf.Height
,conf.ToolbarSet
,conf.Value
);
if(conf.BasePath){
conf.editor.BasePath = conf.BasePath;
}
}
Ext.apply(
conf , conf.editor
);
Ext.apply(conf.Config,
conf.fckConfig
);
//define/modify ext's component id
conf.id = conf.Name;
Ext.ux.FCKeditor.superclass.constructor.call(this, conf);
this.addEvents(
[
/**
* @Event Function(editor)
* Fires after the size of the editor is changed.
*/
'resize',
/**
* @Event Function(editor , toolset)
* Fires after the toolset of the editor is changed.
*/
'toolSetChanged',
/**
* @Event Function(editor)
* Fires after the editor is rendered.
*/
'editorRender'
]
);
},
//private
onRender: function(ct, position){
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'<div class="x-window-mc">',this.CreateHtml(),'</div>'
);
}
if(position){
this.el = this.tpl.insertBefore(position,this ,true);
}else{
this.el = this.tpl.append(ct,this ,true);
}
},
/**
* Get inner FCKeditor instance.
*/
getInnerEditor : function(){
/**
* Use FCKeditorAPI.GetInstance() maybe cause null erorr,
* when call 'Create' or 'ReplaceTextarea' twice more.
*/
/*if(FCKeditorAPI)
return FCKeditorAPI.GetInstance(this.Name);*/
/**
* Ext.ux.FCKeditorMgr can automatic register FCKeditor when the editor was rendered.
*/
return Ext.ux.FCKeditorMgr.get(this.Name);
},
/**
* This method can fire 'toolSetChanged' event.
* @param {String} set , the set of toolbar
*/
setToolbarSet : function(set){
var inner = this.getInnerEditor();
if(inner)
this.Value = inner.GetData();
this.ToolbarSet = set;
this.el.dom.innerHTML=this.CreateHtml();
this.fireEvent( 'toolSetChanged' , this, set);
},
/**
* Set this size of editor.
*
* @param {Object} size ,{ width : ..., height: ...}
* @param {Boolean/Object} , use animate
*/
setSize : function(size ,animate){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setSize(size.width ,size.height,animate);
//var size = this.getSize();
this.Width = size.width;
this.Height = size.height;
this.fireEvent( 'resize' , this);
},
/**
* Get this size of editor.
*
* return {Object} {width: {Number} , height:{Nnmber}}
*/
getSize : function(){
return this.el.getSize();
},
/**
* Set this height of editor.
* @param {String} h ,height
*/
setHeight : function(h){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setHeight(h);
this.Height = this.getHeight();
this.fireEvent( 'resize' , this);
},
/**
* Get this height of editor.
* @return {Nunber}
*/
getHeight : function(){
return this.el.getHeight();
},
/**
* Set this width of editor.
* @param {String} w ,width
*/
setWidth : function(w){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setWidth(w);
this.Width = this.el.getWidth();
this.fireEvent( 'resize' , this);
},
/**
* Get this width of editor.
* @return {Nunber}
*/
getWidth : function(){
return this.el.getWidth();
},
/**
* The value of editor's Getter & Setter.
*/
setValue : function(html){
this.getInnerEditor().SetData(html);
},
getValue : function(){
return this.getInnerEditor().GetData();
},
//private
getEditorFrame : function(){
if(!this. rendered)
return null;
var dom =
Ext.get(
Ext.query("iframe",
this.el.dom
)[0]
);
return Ext.get(dom);
},
/**
* override
*/
destroy: function(){
Ext.ux.FCKeditorMgr.remove(this.Name);
Ext.ux.FCKeditor.superclass.destroy.call(this);
}
}
);
Ext.ux.FCKeditorMgr = (function(){
var collections = new Object();
return {
register : function (name , o){
collections[name] = o;
var editor = Ext.getCmp(name);
if(editor.ownerCt){
editor.ownerCt.doLayout();
}
editor.fireEvent('editorRender',editor);
},
remove : function(name){
delete collections[name];
},
get :function (name){
return collections[name];
}
};
})();
FCKeditor_OnComplete =
typeof FCKeditor_OnComplete == 'function'?
FCKeditor_OnComplete.createSequence(
function( instance ){
Ext.ux.FCKeditorMgr.register(instance.Name , instance);
},FCKeditor_OnComplete):
function( instance ){
Ext.ux.FCKeditorMgr.register(instance.Name , instance);
};
Ext.reg('fckeditor' , Ext.ux.FCKeditor);
DEMO CODE
Ext.onReady(function(){
new Ext.Panel({
title : 'Demo For Ext & FCKeditor Integration',
width : 600,
height : 400,
id: 'panel',
layout: 'fit', // fckeditor support Ext's layout.
renderTo: Ext.getBody(),
monitorResize : true,
items : [
{
/**
* Ext's Config Options
*/
xtype : 'fckeditor',
/**
* FCKeditor's Config Options
*/
Name : 'editor',
ToolbarSet : 'Basic',
BasePath: '/fckeditor/', // If your fckeditor set up the root path,or fix it.
Value :'Welcome to China!!!',
/**
* 'fckConfig' will apply to fckeditor.Config
*/
fckConfig : {
//CustomConfigurationsPath: 'myconfig.js'
}
}
]
});
var editor = Ext.getCmp('editor');
/**
* Set Event Listener
*/
editor.on('toolSetChanged',function(edtr,set){
Ext.get('note').update('The toolset of the editor is '+ set);
});
});
image for demo
http://mylib.duxiu.com/userfile/6020391/2008-11-15/1226713565455.jpg
thanks to reply my post :">, so give me power to strong my code.This version solve mschwartz's problem, that my wrong.
e...,added event 'editorRender' , fix when call ownCt.doLayout().
Other, thanks mschwartz,Zig...
@Support ext's layout.
You can use ext's layout to fit the container of editor(as 'fit') ,instead of set 'Height' and 'Width'.
@Support change toolbarset dynamically.
Use setToolbarSet to do this. Code maybe like : Ext.getCmp(editor.Name).setToolbarSet('Basic');
@Support events : resize , toolSetChanged , editorRender and Ext.Component's events.
@Note
Property id doesn't work now , it will be set the same as 'Name',so you wanna to get this component ,use Ext.getCmp(Name);
Property Name , MUST be set.
The FCKeditor's direct Properties : Width,Height,ToolbarSet,Value,BasePath,CheckBrowser
The FCKeditor's Config Properties( the same as fckConfig ): refer to http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options
update 09-15-2009
BasePath is work now ,thanks 666ragez666 (http://www.extjs.com/forum/member.php?u=60841)
/**
* Class FCKeditor
* Ext & FCKeditor Integration
*
* @author <a href="mailto:hb562100@163.com">hb562100</a>
* @version 2008-12-11
* @Ext forum thread <a href=http://extjs.com/forum/showthread.php?p=263517>http://extjs.com/forum/showthread.php?p=263517</a>
*
* @extend Ext.Component
*/
/**
* @Support ext's layout.
* You can use ext's layout to fit the container of editor(as 'fit') ,instead of set 'Height' and 'Width'.
*
* @Support change toolbarset dynamically.
* Use <b>setToolbarSet</b> to do this. Code maybe like : <i>Ext.getCmp(editor.Name).setToolbarSet('Basic');</i>
*
* @Support events : resize , toolSetChanged , editorRender and Ext.Component's events.
*
* <ul>
* <li>Property id doesn't work now , it will be set the same as 'Name',so you wanna to get this component ,use Ext.getCmp(Name); </li>
* <li>Property Name , MUST be set.</li>
* <li>The FCKeditor's direct Properties : Width,Height,ToolbarSet,Value,BasePath,CheckBrowser</li>
* <li>The FCKeditor's Config Properties( the same as fckConfig ): refer to <a href="http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options">http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options</a></li>
* </ul>
*/
Ext.ux.FCKeditor = Ext.extend(Ext.Component,
{
constructor : function( conf ){
if(!conf.editor){
conf.editor
= new FCKeditor(
conf.Name
,conf.Width
,conf.Height
,conf.ToolbarSet
,conf.Value
);
if(conf.BasePath){
conf.editor.BasePath = conf.BasePath;
}
}
Ext.apply(
conf , conf.editor
);
Ext.apply(conf.Config,
conf.fckConfig
);
//define/modify ext's component id
conf.id = conf.Name;
Ext.ux.FCKeditor.superclass.constructor.call(this, conf);
this.addEvents(
[
/**
* @Event Function(editor)
* Fires after the size of the editor is changed.
*/
'resize',
/**
* @Event Function(editor , toolset)
* Fires after the toolset of the editor is changed.
*/
'toolSetChanged',
/**
* @Event Function(editor)
* Fires after the editor is rendered.
*/
'editorRender'
]
);
},
//private
onRender: function(ct, position){
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'<div class="x-window-mc">',this.CreateHtml(),'</div>'
);
}
if(position){
this.el = this.tpl.insertBefore(position,this ,true);
}else{
this.el = this.tpl.append(ct,this ,true);
}
},
/**
* Get inner FCKeditor instance.
*/
getInnerEditor : function(){
/**
* Use FCKeditorAPI.GetInstance() maybe cause null erorr,
* when call 'Create' or 'ReplaceTextarea' twice more.
*/
/*if(FCKeditorAPI)
return FCKeditorAPI.GetInstance(this.Name);*/
/**
* Ext.ux.FCKeditorMgr can automatic register FCKeditor when the editor was rendered.
*/
return Ext.ux.FCKeditorMgr.get(this.Name);
},
/**
* This method can fire 'toolSetChanged' event.
* @param {String} set , the set of toolbar
*/
setToolbarSet : function(set){
var inner = this.getInnerEditor();
if(inner)
this.Value = inner.GetData();
this.ToolbarSet = set;
this.el.dom.innerHTML=this.CreateHtml();
this.fireEvent( 'toolSetChanged' , this, set);
},
/**
* Set this size of editor.
*
* @param {Object} size ,{ width : ..., height: ...}
* @param {Boolean/Object} , use animate
*/
setSize : function(size ,animate){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setSize(size.width ,size.height,animate);
//var size = this.getSize();
this.Width = size.width;
this.Height = size.height;
this.fireEvent( 'resize' , this);
},
/**
* Get this size of editor.
*
* return {Object} {width: {Number} , height:{Nnmber}}
*/
getSize : function(){
return this.el.getSize();
},
/**
* Set this height of editor.
* @param {String} h ,height
*/
setHeight : function(h){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setHeight(h);
this.Height = this.getHeight();
this.fireEvent( 'resize' , this);
},
/**
* Get this height of editor.
* @return {Nunber}
*/
getHeight : function(){
return this.el.getHeight();
},
/**
* Set this width of editor.
* @param {String} w ,width
*/
setWidth : function(w){
if(!this. rendered)
return ;
var domEl = this.getEditorFrame();
if(domEl)
domEl.setWidth(w);
this.Width = this.el.getWidth();
this.fireEvent( 'resize' , this);
},
/**
* Get this width of editor.
* @return {Nunber}
*/
getWidth : function(){
return this.el.getWidth();
},
/**
* The value of editor's Getter & Setter.
*/
setValue : function(html){
this.getInnerEditor().SetData(html);
},
getValue : function(){
return this.getInnerEditor().GetData();
},
//private
getEditorFrame : function(){
if(!this. rendered)
return null;
var dom =
Ext.get(
Ext.query("iframe",
this.el.dom
)[0]
);
return Ext.get(dom);
},
/**
* override
*/
destroy: function(){
Ext.ux.FCKeditorMgr.remove(this.Name);
Ext.ux.FCKeditor.superclass.destroy.call(this);
}
}
);
Ext.ux.FCKeditorMgr = (function(){
var collections = new Object();
return {
register : function (name , o){
collections[name] = o;
var editor = Ext.getCmp(name);
if(editor.ownerCt){
editor.ownerCt.doLayout();
}
editor.fireEvent('editorRender',editor);
},
remove : function(name){
delete collections[name];
},
get :function (name){
return collections[name];
}
};
})();
FCKeditor_OnComplete =
typeof FCKeditor_OnComplete == 'function'?
FCKeditor_OnComplete.createSequence(
function( instance ){
Ext.ux.FCKeditorMgr.register(instance.Name , instance);
},FCKeditor_OnComplete):
function( instance ){
Ext.ux.FCKeditorMgr.register(instance.Name , instance);
};
Ext.reg('fckeditor' , Ext.ux.FCKeditor);
DEMO CODE
Ext.onReady(function(){
new Ext.Panel({
title : 'Demo For Ext & FCKeditor Integration',
width : 600,
height : 400,
id: 'panel',
layout: 'fit', // fckeditor support Ext's layout.
renderTo: Ext.getBody(),
monitorResize : true,
items : [
{
/**
* Ext's Config Options
*/
xtype : 'fckeditor',
/**
* FCKeditor's Config Options
*/
Name : 'editor',
ToolbarSet : 'Basic',
BasePath: '/fckeditor/', // If your fckeditor set up the root path,or fix it.
Value :'Welcome to China!!!',
/**
* 'fckConfig' will apply to fckeditor.Config
*/
fckConfig : {
//CustomConfigurationsPath: 'myconfig.js'
}
}
]
});
var editor = Ext.getCmp('editor');
/**
* Set Event Listener
*/
editor.on('toolSetChanged',function(edtr,set){
Ext.get('note').update('The toolset of the editor is '+ set);
});
});
image for demo
http://mylib.duxiu.com/userfile/6020391/2008-11-15/1226713565455.jpg