1.
下载fckeditor的包。
http://ckeditor.com 官网.
我就直接进入下载与java关联的一个项目.
https://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/
直接将其一个demo下载下来..
2.打开
fckeditor-java-demo-2.6.war.zip这个包.使用eclipse建立一个
项目叫做fckeditordemo.然后将其文件夹下的所有数据都复制到WebContent下面
3
.将项目部署入tomcat访问..
http://localhost:8080/fckeditordemo/index.jsp
将会出现一个demo。你可以点击图片上传进行图片的管理..
4.确认了fckeditor可以使用了之后.我们就要使用到ext来调用了.首先在eclipse下面建立一个js文件.把ext2或者3存放到下面.然后建立KnowledgeManager文件夹.下面就是建立自己的js
KnowlegeForm.js。使用晚上的demo修改的.下面也是网上搜到最多的例子.个人觉得有点麻烦.
var KnowledgeForm = function(_title) {
return this.setup();
};
KnowledgeForm.prototype.setup = function() {//内容初始化.
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditorForm',
bodyStyle:'padding:5px 5px 0',
width: 950,
height:450,
defaultType: 'textfield',
items:[
{
fieldLabel:'知识标题',
name:'knowledgeTitle',
blankText: '知识标题为必填!',
id:'knowledgeTitle'
},
{
fieldLabel:'知识内容',
xtype:'textarea',
name:'knowledgeContent',
blankText: '知识内容为必填!',
id:'knowledgeContent'
}
],
buttons: [{
text: 'Save',
type:'submit',
handler: function() {
Ext.get('knowledgeContent').dom.value=editorInstance.GetXHTML( true );//获取fckeditor内容赋给textarea
alert(Ext.get('knowledgeContent').dom.value);
if(fckeditorFormPanel.form.isValid()){//验证通过
fckeditorFormPanel.form.doAction('submit',{
url:'submit.do',
method:'post',
waitMsg:'正在提交,请稍等...',
success:function(form,action){//成功返回
},
failure:function(form,action){//失败返回
}
});
}
}
},{
text: 'Cancel'
}]
});
fckeditorFormPanel.render(document.body);
/**
* 以下创建在线编辑器
*/
//knowledgeContent为你要取代的textarea的id名字
var oFCKeditor = new FCKeditor( 'knowledgeContent',810,350 ) ;
oFCKeditor.BasePath = "/fckeditordemo/fckeditor/" ; //:项目的名字/fckeditor存放的路径
oFCKeditor.ToolbarSet = 'Default';//使用默认的工具栏
oFCKeditor.ReplaceTextarea() ;//取代textarea
}
var editorInstance;
/**
* FCKEditor初始化完成将调用此方法
* @param {Object} editorInstance
*/
function FCKeditor_OnComplete( instance ) {
editorInstance=instance;
};
demo.jsp
<link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2/ext-all.js"></script>
<script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 -->
<script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new KnowledgeForm("部门添加");
});
</script>
下面是一个在ext官网的一个例子
http://www.extjs.com/forum/showthread.php?t=17423
他封装了一个ext.FCKeditor.js.
Ext.form.FCKeditor = function(config){
Ext.form.FCKeditor.superclass.constructor.call(this, config);
this.FCKid=0;
this.MyisLoaded=false;
this.MyValue='';
};
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);
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);
}
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
setTimeout("loadFCKeditor('"+this.name+"');",100);
},
setValue : function(value){
this.MyValue=value;
if (this.FCKid==0) this.FCKid=get_FCKeditor_id_value()
FCKeditorSetValue(this.FCKid,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(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(this);
}else{
return this.MyValue;
}
}
});
Ext.reg('fckeditor', Ext.form.FCKeditor);
function loadFCKeditor(element){
oFCKeditor = new FCKeditor( element ) ;
oFCKeditor.ToolbarSet = sFCKeditorToolbar ;
oFCKeditor.Config['SkinPath'] = sFCKeditorSkinPath ;
oFCKeditor.Config['PreloadImages'] = sFCKeditorSkinPath + 'images/toolbar.start.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.end.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.bg.gif' + ';' +
sFCKeditorSkinPath + 'images/toolbar.buttonarrow.gif' ;
oFCKeditor.BasePath = sFCKeditorBasePath ;
oFCKeditor.Config['BaseHref'] = sFCKeditorBaseHref ;
oFCKeditor.Height = 260 ;
oFCKeditor.ReplaceTextarea() ;
}
function FCKeditor_OnComplete(editorInstance){
Ext.getCmp(editorInstance.Name).MyisLoaded=true;
editorInstance.Events.AttachEvent('OnStatusChange', function(){
Ext.getCmp(editorInstance.Name).setValue();
})
}
var FCKeditor_value=new Array();
function FCKeditorSetValue(id,name,value){
if ((id!=undefined)&&(name!=undefined)){
if (value!=undefined) FCKeditor_value[id]=value;
else if (FCKeditor_value[id]==undefined) FCKeditor_value[id]='';
var oEditor = FCKeditorAPI.GetInstance(name) ;
if(oEditor!=undefined) oEditor.SetData(FCKeditor_value[id])
}
}
function FCKeditorGetValue(name){
if ((id!=undefined)&&(name!=undefined)){
var oEditor = FCKeditorAPI.GetInstance(name) ;
data='';
if(oEditor!=undefined) data=oEditor.GetData()
return data;
}
}
var FCKeditor_id_value;
function get_FCKeditor_id_value(){
if (!FCKeditor_id_value){
FCKeditor_id_value=0;
}
FCKeditor_id_value=FCKeditor_id_value+1;
return FCKeditor_id_value;
可以直接使用
{
xtype:'fckeditor',
name:'content_1',
id:'content_1',
fieldLabel:'Content',
height:270
}
KnowlegeForm2.js
var KnowledgeForm = function(_title) {
return this.setup();
};
KnowledgeForm.prototype.setup = function() {//内容初始化.
var fckeditorFormPanel = new Ext.FormPanel({
labelWidth: 75,
url:'',
frame:true,
title: 'fckeditorForm',
bodyStyle:'padding:5px 5px 0',
width: 950,
height:450,
defaultType: 'textfield',
reader: new Ext.data.JsonReader(
{
root:'data'
},
[
{name:'knowledgeId',mapping:'knowledgeId'}
,{name:'knowledgeTitle',mapping:'knowledgeTitle'}
,{name:'knowledgeContent',mapping:'knowledgeContent'}
]
),
defaults: {
anchor: '95%,95%',
allowBlank: false,
selectOnFocus: true,
msgTarget: 'side',
width: 150
},
items:[{
xtype:'hidden'
,name:'knowledgeId'
,id:'knowledgeId'
},
{
fieldLabel:'知识标题',
name:'knowledgeTitle',
blankText: '知识标题为必填!',
id:'knowledgeTitle'
},
{
fieldLabel:'知识内容',
xtype:'fckeditor',
name:'knowledgeContent',
blankText: '知识内容为必填!',
id:'knowledgeContent'
}
],
buttons: [{
text: 'Save',
type:'submit',
handler: function() {
alert(Ext.get('knowledgeContent').dom.value);
if(fckeditorFormPanel.form.isValid()){//验证通过
fckeditorFormPanel.form.doAction('submit',{
url:'submit.do',
method:'post',
waitMsg:'正在提交,请稍等...',
success:function(form,action){//成功返回
},
failure:function(form,action){//失败返回
}
});
}
}
},{
text: 'Cancel'
}]
});
return fckeditorFormPanel;
}
demo2.jsp
<link rel="stylesheet" type="text/css" href="js/ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2/ext-all.js"></script>
<script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script><!-- 上线编辑工具 -->
<script type="text/javascript" src="js/KnowledgeManager/ext.FCKeditor.js"></script>
<script type="text/javascript" src="js/KnowledgeManager/KnowlegeForm2.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new KnowledgeForm("部门添加");
});
</script>
如果想使用的fckeditor比较符合ext风格.可以修改feckeditor里面的fckconfig.js.
将FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;该我为FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;.这里它显示将是office2003的风格
- 大小: 40.9 KB
- 大小: 24.8 KB
- 大小: 109.2 KB
分享到：
相关推荐
ext与fckeditor整合，下下看看吧
ext和fckeditor结合使用。解决了ext编辑器的不足之处。
NULL 博文链接：https://taink.iteye.com/blog/549062
FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。FCKEditor使用帮助文档。
NULL 博文链接：https://01jiangwei01.iteye.com/blog/1174461
fckeditor使用手册 fckeditor使用手册
fckeditor和使用方法，可以上传图片，flash
ASP.NET 文本编辑器 FCKeditor 使用方法详解 FCKeditor 是一个功能强大且流行的 ASP.NET 文本编辑器，提供了许多实用的功能，如格式化文本、插入图片、上传文件、创建表格等。下面将详细介绍如何使用 FCKeditor 在 ...
FCKeditor2.6.4使用说明 使用FCKeditor的人可以下来看看噢~
html编辑器FCKeditor使用详解，手把手教你如何使用FCKeditor.
7 使用FCKeditor的API 26 7.1 获得FCKeditor的实例 26 7.1.1 获得当前页FCKeditor实例 26 7.1.2 从FCKeditor的弹出窗口中获得FCKeditor实例 26 7.1.3 从框架页面的子框架中获得其它子框架的FCKeditor实例 26 7.1.4 ...
FCKeditor 2.4.3详细使用方法
网络上有很多FCKeditor的用法，大多数是互相抄袭，或者...但是这个FCKeditor使用方法详解--图文详解讲解的非常清楚，关键还是附带图片，让人一看就一目了然，很容易看懂。另外还收录了fckeditor的瘦身。很全面的哦--
cuteEditor Fckeditor破解 使用示例 cuteEditor Fckeditor破解 使用示例
FCKEditor使用范例希望对你有所帮助
FCKeditor中文使用手册，本手册由建站三人行站长（www.zengl.com）提供的翻译。帮助程序员能够快速掌握fckeditor在线编辑器的使用。
FCKeditor使用方法技术详解。 FCKeditor是目前最优秀的可见即可得网页编辑器，本文详细介绍其安装，使用FCKEditor的各项功能，常用设置，配置方法； 另外还提供了FCKEditor API,精简FCKEditor文件控件大小的方法。
FCKeditor是目前最优秀的可见即可得网页编辑器之一用于文本编辑的工具，支持多种方法调用
FCKeditor使用方法详解.doc