弹出一个编辑window,效果如图,
具体代码如下:
Ext.form.FCKeditor.js
/**
var oFCKeditorOptions = {
BasePath: 'fckeditor/',
Config: {
BaseHref: 'http://localhost:8080/hrcis/',
SkinPath: '../../fckeditor/editor/skins/office2003/',
CustomConfigurationsPath: '../../fckeditor/fckconfig.js',
ProcessHTMLEntities: true,
ProcessNumericEntities: false
},
AllowQueryStringDebu: false,
ToolbarSet: 'XXX'
};
*/
Ext.form.FCKeditor = function(config){
this.config = config;
Ext.form.FCKeditor.superclass.constructor.call(this, config);
this.MyisLoaded = false;
this.MyValue = '';
this.fckInstance= undefined; // to avoid using FCKAPI, this is a reference to instance created on FCKeditor_OnComplete
};
Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, {
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);
//Hide textarea to stop flashing up before FCKEditor renders.
this.hideMode = "visibility"; // set hideMode to visibility, to retain height.
this.hidden = true; // hide textarea
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.name+"',"+ this.config.height +");",100);
},
setValue : function(value){
this.MyValue = value;
if (this.MyisLoaded){
FCKeditorSetValue(this.name,value);
}
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
},
getValue : function(){
if (this.MyisLoaded){
value = FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getValue.call(this);
} else {
return this.MyValue;
}
},
getRawValue : function(){
if (this.MyisLoaded){
value=FCKeditorGetValue(this.name);
Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
return Ext.form.TextArea.superclass.getRawValue.call(this);
} else {
return this.MyValue;
}
}
});
Ext.reg('fckeditor', Ext.form.FCKeditor);
function loadFCKeditor(element, height){
oFCKeditor = new FCKeditor(element);
oFCKeditor.Height = height;
Ext.apply(oFCKeditor,oFCKeditorOptions)
oFCKeditor.ReplaceTextarea();
}
function FCKeditor_OnComplete(editorInstance){
Ext.getCmp(editorInstance.Name).MyisLoaded = true;
Ext.getCmp(editorInstance.Name).fckInstance = editorInstance;
}
function FCKeditorSetValue(name,value){
if (name != undefined){
var extCmp = Ext.getCmp(name);
if (extCmp != undefined) {
extCmp.fckInstance.SetData(value);
}
}
}
function FCKeditorGetValue(name){
if (name != undefined){
var data = '';
var extCmp = Ext.getCmp(name);
if (extCmp != undefined) {
data = extCmp.fckInstance.GetData();
}
return data;
}
}
主页面代码如下main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>编辑页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/ext33/resources/css/ext-all.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/plugin/Ext.form.FCKeditor.js"></script>
<!---->
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/fckeditor/fckeditor.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var oFCKeditorOptions = {
BasePath: '${pageContext.request.contextPath}/jslib/fckeditor/',
Config: {
BaseHref: '${pageContext.request.contextPath}',
SkinPath: '${pageContext.request.contextPath}/jslib/fckeditor/editor/skins/office2003/',
CustomConfigurationsPath: '${pageContext.request.contextPath}/jslib/fckeditor/fckconfig.js',
ProcessHTMLEntities: true,
ProcessNumericEntities: false
},
AllowQueryStringDebu: false,
ToolbarSet: 'Default'
};
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
activeItem:0,
items:[
{
xtype:'panel',
title:'编辑页面',
items:[{
name: 'body',
fieldLabel: '正文',
height: 430,
xtype:'fckeditor',
id:'body'
}]
}
],
defaults: {autoScroll:true}
});
win = new Ext.Window({
layout:'fit',
width:500,
height:300,
closeAction:'close',
plain: true,
items:[tabs],
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.close();
}
},{
text: '确定',
handler: function(){
var editor = Ext.getCmp("body");
var v = editor.getValue();
alert(v);
}
}]
});
win.show(this);
})
</script>
</html>
引用的Fckeditor 为FCKeditor_2.5b.zip,在附件中可以下载
- 大小: 25.8 KB
分享到:
相关推荐
**正文** 在Web开发中,富文本编辑器和前端框架...结合使用FCKEditor与EXT,可以创建出功能强大且用户体验优秀的Web应用。这种结合方式在内容管理系统、论坛、博客平台等场景下尤为常见,为用户提供了一流的编辑体验。
标题“ext-fckeditor整合”指的是将EXT框架与FCKeditor集成到一起,以创建一个具有高级文本编辑功能的EXT应用。这样的整合可以使开发者在EXT构建的应用中嵌入一个功能强大的文本编辑器,方便用户编辑和管理文本内容...
这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中,为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor,首先你需要理解EXT的基本概念,如组件(Component)、布局...
标题中的"ext-fckeditor"指的是基于Java开发的一个项目,它集成了Ext库和FCKeditor。这个项目的主要目的是为开发者提供一个完整的、可运行的源代码解决方案,以便于在Java环境中集成富文本编辑器功能。 Ext是一个...
包含的"EXT中FCK使用"文件很可能是包含了一个完整的示例,展示如何在EXT应用中集成和使用FCKeditor。这个示例应该包括了创建FCKeditor组件的代码,以及如何在EXT布局中使用该组件的示例。通过阅读和运行这个示例,...
2. 在ExtJS组件(如`Ext.form.TextArea`)中替换为FCKeditor的实例,这通常涉及到自定义ExtJS的组件或者在渲染后调用FCKeditor的初始化方法。 3. 配置FCKeditor的设置,如工具栏、样式集等,以适应应用需求。 4. ...
代码如下:{ xtype : “textarea”, name : “content”, anchor : ‘97%’, height : 400, id : “content”, fieldLabel : “内容”, listeners : { “render” : function(f) { fckEditor = new FCKeditor(...
- 运行index.asp,你会看到FCKeditor已经集成在页面中,且具备图片上传功能。 通过以上步骤,你已成功在ASP环境中安装并配置了FCKeditor,现在可以方便地在网页中使用这款强大的富文本编辑器,进行文字编辑和图片...
-使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...
PhpGrid 是用于快速开发网站后台,管理系统(ERP,OA,CRM等)的PHP开发类库(工具) .主要功能如下: 简单,不需要花较多的...很容易的集成Fckeditor 容易扩展,当框架无法满足您复杂的业务需求时,您可以轻松的扩展该框架
具体而言,该平台涵盖了Spring2.5、Struts2.0.14、SpringSecurity2.0、SpringAOP、Hibernate3.3GA、FCKEditor2.6、EXT3、CXF2.0、JBPM4.4GA、Compass+Lucene、JasperReport4、JavaMail等一系列前沿技术组件,以及Log...
此外,ZK与第三方库如Google Maps、FCKeditor、Dojo和Timeline的集成,以及对Android平台的支持,增强了其灵活性和适用性。 对于现有的Web应用程序,选择框架需要考虑其是否能与现有架构无缝集成。例如,.NET平台...
-使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...