由于项目需要用到Extjs+FCKeditor,在Extjs官方坛论上找到了FCKeditor的扩展
http://extjs.com/forum/showthread.php?t=17423,在使用过程中到了不少的问题,主要是同一个页面加载多个FCK instance及设置SetValue的问题。以下是修改过后的代码:
Ext.namespace('Ext.ux.form');
/**
* FCKeditor 初始配置信息
*
* @type {Object}
*/
var oFCKeditorOptions = {
BasePath : 'js/fckeditor/',
Config : {
BaseHref : window.location,
SkinPath : '../editor/skins/office2003/',
ProcessHTMLEntities : true,
ProcessNumericEntities : false,
ToolbarStartExpanded : true,
LinkBrowser : true,
ImageBrowser : true,
FlashBrowser : true,
LinkUpload : true,
ImageUpload : true,
FlashUpload : true
},
ToolbarSet : 'Symbol'
};
/**
* Ext FCKeditor
*
* @param {Object}
* config 配置信息
*/
Ext.ux.form.FCKeditor = function(config) {
this.config = config;
Ext.ux.form.FCKeditor.superclass.constructor.call(this, config);
/**
* 通知FCKeditor是否实例化
* notice the component's FCKeditor instance inited
* @type Boolean
*/
this.instanceLoaded = false;
/**
* 实例值
* the component's FCKeditor instance value
* @type String
*/
this.instanceValue = '';
/**
* 组件的FCKeditor实例
* @type {FCKeditor}
*/
this.editorInstance = undefined;
};
/**
* Ext FCKeditor
*
* @class Ext.ux.form.FCKeditor
* @extends Ext.form.TextArea
*/
Ext.extend(Ext.ux.form.FCKeditor, Ext.form.TextArea, {
/**
* 初始化事件
*/
initEvents : function() {
this.on('destroy', function() {
if (typeof this.editorInstance != 'undefined') {
delete this.editorInstance;
}
});
},
onRender : function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag : "textarea",
style : "width:100px;height:60px;",
autocomplete : "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
this.hideMode = "visibility";
this.hidden = true;
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag : "pre",
cls : "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
setTimeout("loadFCKeditor('" + this.id + "'," + this.config.height + ");", 100); // Change
},
/**
* 设置是否已经加载过此控件
* set FCKeditor instance is inited
* @param {Boolean} v
*/
setIsLoaded : function(v) {
this.instanceLoaded = v;
},
/**
* 获取是否已实例化过此控件
* get FCKeditor instance is inited
* @return {Boolean}
*/
getIsLoaded : function() {
return this.instanceLoaded;
},
/**
*
* @param {String} value
*/
setValue : function(value) {
this.instanceValue = value;
if (this.instanceLoaded) {
this.FCKeditorSetValue(value); // Change this.name
}
Ext.form.TextArea.superclass.setValue.apply(this, [value]);
},
/**
*
* @return {String}
*/
getValue : function() {
if (this.instanceLoaded) {
value = this.FCKeditorGetValue(); // Change this.name to this.id
Ext.form.TextArea.superclass.setValue.apply(this, [value]);
return Ext.form.TextArea.superclass.getValue.call(this); // Change getValue(this) to
} else {
return this.instanceValue;
}
},
/**
*
* @return {String}
*/
getRawValue : function() {
if (this.instanceLoaded) {
value = this.FCKeditorGetValue(); // Change this.name to this.id
Ext.form.TextArea.superclass.setRawValue.apply(this, [value]);
return Ext.form.TextArea.superclass.getRawValue.call(this); // Change getValue(this) to
} else {
return this.instanceValue;
}
},
/**
* 设置FCKeditor实例的值
* @param {String} value
*/
FCKeditorSetValue : function(value) {
if(this.instanceLoaded == false){
return;
}
// fix IE No Permission Denied errors
var runner = new Ext.util.TaskRunner();
var task = {
run : function() {
try {
var editor = this.editorInstance; // update var editor
if (editor.EditorDocument.body) {
editor.SetData(value);
runner.stop(task);
}
} catch (ex) {
//Ext.logf('调试信息(info):{0}', ex);
}
},
interval : 100,
scope : this
};
runner.start(task); // end fix
},
/**
* 获取FCKeditor实例的值
* @return {String}
*/
FCKeditorGetValue : function() {
var data = '';
if(this.instanceLoaded == false){
return data;
}
data = this.editorInstance.GetData();
return data;
}
});
Ext.reg('fckeditor', Ext.ux.form.FCKeditor);
/**
* 实例化FCKeditor
*
* @param {String}
* element el id
* @param {Number}
* height
*/
function loadFCKeditor(element, height) {
var oFCKeditor = new FCKeditor(element);
oFCKeditor.BasePath = oFCKeditorOptions.BasePath;
oFCKeditor.ToolbarSet = oFCKeditorOptions.ToolbarSet;
oFCKeditor.Config = oFCKeditorOptions.Config;
oFCKeditor.Height = height;
oFCKeditor.ReplaceTextarea();
}
/**
* FCKeditor API: 当FCKeditor实例化完成时执行
*
* @param {FCKeditor} editorInstance
*/
function FCKeditor_OnComplete(editorInstance) {
/**
* @type {Ext.ux.form.FCKeditor}
*/
var activeEditor = Ext.getCmp(editorInstance.Name);
activeEditor.editorInstance = editorInstance;
activeEditor.instanceLoaded = true;
activeEditor.FCKeditorSetValue(activeEditor.instanceValue);
editorInstance.Events.AttachEvent('OnBlur', FCKeditor_OnBlur);
editorInstance.Events.AttachEvent('OnFocus', FCKeditor_OnFocus);
}
function FCKeditor_OnBlur(editorInstance) {
editorInstance.ToolbarSet.Collapse();
}
function FCKeditor_OnFocus(editorInstance) {
editorInstance.ToolbarSet.Expand();
}
示例:
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="../lib/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="Ext.ux.form.FCKeditor.js"></script>
</head>
<body>
<script language="JavaScript">
<!--
Ext.onReady(function() {
var win_cxpz = new Ext.Window({
layout : 'fit',
width : 800,
title :'FCKeditor 示例',
height : 400,
closeAction :'hide',
plain : true,
item :[{
xtype : 'fckeditor'
}],
buttonAlign :'center',
buttons: [{
text : '返回',
handler : function(){
win_cxpz.hide();
}
}]
});
win_cxpz.show();
});
//-->
</script>
</body>
</html>
分享到:
相关推荐
ext与fckeditor整合,下下看看吧
ext和fckeditor结合使用。解决了ext编辑器的不足之处。
该项目是一个可运行的java项目源代码,可为开发人员提供一个完整的ext fckeditor 源代码。
NULL 博文链接:https://taink.iteye.com/blog/549062
NULL 博文链接:https://01jiangwei01.iteye.com/blog/1174461
Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤Fckeditor皮肤
在这一版本中我们完全实现了与轻松互联网开发平台的无缝整合,在平台中调用FCKeditor跟使用标签一样Easy(例子文件在_samples/editor目录下)。而且没给恶意攻击者留任何可能的漏洞。 另外,对重点功能也进行扩展,...
手动 扩展Fckeditor 上传文件 功能
NULL 博文链接:https://goby2008.iteye.com/blog/360321
解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下(也可以是子孙目录下)。 解压FCKeditor控件,在其子目录bin/Release/2.0下有一个程序集。在Web应用的项目中引用该程序集。 2. 在页面...
FCKeditor.Net_2.6.3.zip和FCKeditor-v2.6.3
fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo fckeditor 源码 demo
注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示: oFckeditor.BasePath="/...
FCKeditor上传图片 FCKeditor配置 FCKeditor在jsp中使用 ,加载到myeclipse 中就可以跑起来,源码很清晰
fckEditor,fckEditor,fckEditor
3.在VS2005/2008的工具箱上新建一个名叫FCKEditor的Tab,然后在里面点右键,选择Choose Item,定位到FCKEditor目录下的FredCK.FCKEditorV2.dll。该Tab下就会生成一个FCKEditor的.net组件。在vs的Design模式下把该...
1 FCKeditor的下载及介绍 4 1.1 下载地址 4 1.2 FCKeditor下载包的介绍 4 2 FCKeditor的目录和文件精简 4 3 在页面创建FCKeditor 4 3.1 Js创建FCKeditor实例: 4 3.1.1 方法一:内嵌方法(推荐) 4 3.1.2 方法二:替换...
FCKeditor开发jar包及fckeditor文件夹
1 FCKeditor简介: FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等...
fckeditor api fckeditor api fckeditor api fckeditor api fckeditor api fckeditor apifckeditor api