ext学习之fckeditor的使用

最新推荐文章于 2022-08-09 09:42:20 发布
最新推荐文章于 2022-08-09 09:42:20 发布
阅读量577 收藏
点赞数
分类专栏： ext 文章标签： fckeditor EXT Eclipse JSP prototype
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_15553/article/details/81821249
版权
1.[color=red]下载fckeditor的包[/color]。[url]http://ckeditor.com[/url] 官网.
我就直接进入下载与java关联的一个项目.
[url]https://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/[/url]

[img]http://dl.iteye.com/upload/attachment/199394/7ed9ea1e-b240-306b-9e28-2fd8eff42917.jpg[/img]
直接将其一个demo下载下来..

2.打开[color=red]fckeditor-java-demo-2.6.war.zip[/color]这个包.使用eclipse建立一个[color=red]项目叫做fckeditordemo[/color].然后将其文件夹下的所有数据都复制到WebContent下面
[img]http://dl.iteye.com/upload/attachment/199396/b2013898-95b0-30cf-b10a-3e3cb8dd7cb9.jpg[/img]

3[color=red].将项目部署入tomcat访问[/color]..[url]http://localhost:8080/fckeditordemo/index.jsp[/url]
将会出现一个demo。你可以点击图片上传进行图片的管理..
[img]http://dl.iteye.com/upload/attachment/199398/5aee8580-0da1-3f13-bc85-e39273d2e9bf.jpg[/img]

4.确认了fckeditor可以使用了之后.我们就要使用到ext来调用了.首先在eclipse下面建立一个js文件.把ext2或者3存放到下面.然后建立KnowledgeManager文件夹.下面就是建立自己的js
[color=red]KnowlegeForm.js。使用晚上的demo修改的.下面也是网上搜到最多的例子.个人觉得有点麻烦.[/color] 

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

[color=red]demo.jsp[/color] 

    <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>


[color=red]下面是一个在ext官网的一个例子[/color]
[url]http://www.extjs.com/forum/showthread.php?t=17423[/url]
[color=red]他封装了一个ext.FCKeditor.js[/color]. 

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
}

[color=red]KnowlegeForm2.js[/color] 

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

[color=red]demo2.jsp[/color] 

    <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的风格
iteye_15553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[EXT.NET]GridPanel列表增删改预览
德仔
06-21 5162
这个例子只是Coolite一个很简单的应用,我相信新手学习还是用的到的.也给大家带个头,写篇新手教程. GridPanel就不作介绍了,asp.net开发人员应该比较熟悉了.官方的GridView绑定数据是通过SqlDataSource,ObjectDataSource等绑定的. 这里,GridPanel需要Store来绑定数据.首先在页面添加一个Store,如下: ext:Store ID
在EXT中使用FCKEditor编辑器例子
03-17
NULL 博文链接：https://taink.iteye.com/blog/549062
DB2错误信息（按sqlcode排序）
热门推荐
MCpang的博客
12-14 1万+
转自：http://blog.tianya.cn/blogger/post_read.asp?BlogID=96865&PostID=26978632 sqlcode sqlstate 说明 　　000 00000 SQL语句成功完成 　　01xxx SQL语句成功完成，但是有警告 　　+012 01545 未限定的列名被解释为一个有相互关系的引用 　　+098 01568 动态SQL语
FCKEditor与ext结合使用
老李 技术 专栏
07-20 2677
在做ext项目的时候用到了ext的htmleditor编辑器，发现功能实在是太烂,和ext其他功能相差太大了。刚开始想自己做ext插件来实现编辑器的其他功能，可是进度太慢太繁琐，放弃。如果要是ext和FCKEditor就好了，经过研究可以实现。1.首先FCKEditor下载到http://ckeditor.com/download下载，下载两个压缩文件，分别是FCKeditor_2.6.5.zip 和FCKeditor.Net 2.6.3.zip，如果想了解asp.net和FCKEditor结合应供请到我的
【信安学习笔记三】文件上传
weixin_43374106的博客
08-09 1075
个人学习参考用笔记 目录前言一、（一）域名 前言 xxxxxx 一、 （一）域名 标题
记Fckeditor漏洞
zhangpeng999123的博客
03-07 2074
首先是对目标站点进行了基本的测试然后发现了存在fckeditor，fckeditor的漏洞有很多，基本asp的都被通杀了，大家可以在网上看看。首先看看编辑器的版本： $ http://xxxxxxx.com/fckeditor/editor/dialog/fck_about.html 查看版本信息： 版本信息 可以看到是2.6.6的版本，那就对症下药。同时提一下，查看版...
EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维
过客阵营 -- 简单的就要最简单
08-18 145
代码如下,刚学习EXT,感觉比使用DOJO畅快许多,不像&lt;&lt;征服AJAX dojo,prototype,script.aculo.us&gt;&gt;书中作者使用的DOJO是0.4的版本,我下的是1.1的版本,结果许多组件的命名空间都变了,书中讲的代码等于是废的.前面的prototype,script.aculo.us到是讲的不错,但是不深. 所以后面自己也就废弃了DOJO的学习,学习...
Liferay中使用fckeditor liferay-ui:input-editor
dalianlhy的专栏
05-15 322
做liferay-ui:input-editor标签遇到挺多困难，在网上看到一篇文章写的挺好的，留个备份，方便以后学习。     Liferay中使用fckeditor的研究 Liferay中已经集成了fckeditor和其他的可视化编辑器。这部分，首先研究一下如何添加代码，方便得实现可视化编辑；同时也简单研究一下对fckeditor的定制，添加Flash的上载功能。 代码...
FCKeditor使用详解.doc
04-12
FCKeditor使用详解.doc
fckeditor 与ext 集成使用
03-27
NULL 博文链接：https://01jiangwei01.iteye.com/blog/1174461
基于EasyX的贪吃蛇小游戏 - C语言
06-05
基于EasyX的贪吃蛇小游戏 - C语言
Energy Core ECP5705-V01.pdf
06-05
Energy Core ECP5705-V01.pdf
matlabGUI学生成绩管理系统pdf
最新发布
06-05
建立基于图形用户界面GUI的学生成绩管理系统，该系统能够实现学生成绩信息的增加、删除、查询(查询某门课所有学生的成绩并显示排名，查询某个学生的各科成绩并显示排名)、课程成绩统计最高分、最低分、平均分、方差、并显示相应的排名;绘制柱状图、条形图、饼状图、正太分布曲线等功能。 通过本实验使学生掌握图形用户界面GUI的操作和设计流程，并通过编写回调函数巩固前期的知识。
高职教育品牌专业申报汇总表.doc
06-05
高职教育品牌专业申报汇总表.doc
游戏运营数据后台需求表.docx
06-05
游戏运营数据后台需求表.docx
国家开放大学数据库应用技术第三次形考作业3
06-05
使用TOP和CASE的查询。写出实现如下查询的SQL语句。 　(18) 列出“数据库基础”课程考试成绩前三名的学生的学号、姓名、所在系和考试成绩。 　(19) 查询Java考试成绩最低的学生的姓名、所在系和Java成绩。 　(20) 查询选修了Java的学生学号、姓名、所在系和成绩，并对所在系进行如下处理： 　　当所在系为“计算机系”时，显示“CS”； 　　当所在系为“信息管理系”时，显示“IS”； 　　当所在系为“通信工程系”时，显示“CO”； 　　对其他系，均显示“OTHER”。
java onetowthree替换_FCKEditor2.6.6 配合 JavaWeb 的 使用步骤
05-30
接着，在需要使用 FCKEditor 的页面中引入 FCKEditor 的 JavaScript 文件： ```html <script type="text/javascript" src="/path/to/fckeditor.js"> ``` 然后，在页面中添加一个 textarea 元素，并给它一个唯一的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值