FCKEditor与ext结合使用

来源：互联网发布：淘宝首页设置全屏编辑：程序博客网时间：2024/05/17 08:45

在做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结合应供请到我的另一个文章里查看，http://blog.csdn.net/lzy_1515/archive/2010/03/22/5405250.aspx，在此就不多讲了。

2.文件解压后

将fckeditor文件夹复制到ext文件夹根目录下。如图

3.在添加脚本文件，此文件可以放在网站的如何目录下，我新建fckeditor.js放在的ext根目录下了。

fckeditor.js代码如下：

/// <reference path="vswd-ext_2.2.js" />function ready(){ Ext.QuickTips.init();var fckeditorFormPanel = new Ext.FormPanel({ labelWidth: 75, width: 1000, height:500, defaultType: 'textfield', plain:true,layout:"form", items: [{ xtype:'textarea', fieldLabel:'编辑',labelSeparator:'：',id:'code',name:'code', height:400,width:500 } ], buttons: [ { text: '确定提交', type:'submit', handler:function () { //关键不能删除的 Ext.get('code').dom.value=editorInstance.GetXHTML(true);//获取fckeditor内容赋给textarea var str = Ext.getCmp("code"); alert(str.getValue()); // if(fckeditorFormPanel.form.isValid()){//验证通过 // fckeditorFormPanel.form.doAction('submit',{ // url:'json.aspx', // method:'post', // waitMsg:'正在提交,请稍等...', // success:function(form,action){//成功返回 // var result = action.result.success; // if(result == 'true' ){ // window.location.href="Test.aspx";// }else{// Ext.Msg.alert("提示消息","添加错误");// } // }, // failure:function(form,action){//失败返回 // Ext.Msg.alert("提示消息","添加数据发生了异常"); // } // }); // } } }] }); fckeditorFormPanel.render(document.body); /** * 以下创建在线编辑器 */var oFCKeditor = new FCKeditor( 'code',810,350 ) ;oFCKeditor.BasePath = "/extjsFckeditor/ext/fckeditor/"; //编辑器路径oFCKeditor.ToolbarSet = 'Default'; //工具栏样式主题，经过测试其他的主题还要到fckconfig.js下去修改。oFCKeditor.ReplaceTextarea() ;}var editorInstance; /** * FCKEditor初始化完成将调用此方法 * @param {Object} editorInstance */ function FCKeditor_OnComplete( instance ) { editorInstance= instance; };

4.显示fckeditor编辑器。新建Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>fckeditor测试</title> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-lang-zh_CN.js" mce_src="ext/ext-lang-zh_CN.js" type="text/javascript"></mce:script> <mce:script src="ext/fckeditor.js" mce_src="ext/fckeditor.js" type="text/javascript"></mce:script> <mce:script src="ext/fckeditor/fckeditor.js" mce_src="ext/fckeditor/fckeditor.js" type="text/javascript"></mce:script></head><body> <form id="form1" runat="server"> <div> <mce:script type="text/javascript"></mce:script> </div> </form></body></html>

5.关键的一步差点忘了，还要加载个dll，在网上可以下载到FredCK.FCKeditorV2.dll，复制到bin目录下就ok。

6.在webconfig中配置保存上传图片的路径。

7.显示编辑器。

希望对大家能有帮助。

下载地址：http://download.csdn.net/source/2558370