在ASP.NET上使用CKEditor在线编辑器
CKEditor在线编辑器是FCKeditor的升级版,更方便使用、加载速度更快。CKEditor经过了重写,提供了丰富而强大的集成和互动的API。新版本的基础上再加上一个全新的用户界面,甚至可以让用户精确地自定义颜色。同时它也继承了FCKeditor轻量化、易用的特点。它能在asp、asp.net、PHP、 JSP等多个平台上使用,并且兼容大部分浏览器。不过它把文件上传部份从编辑器里拨离出来,成为一个单独的,收费的的插件CKFinder。如果需要上传功能还要下载CKFinder并进行整合。
下面我们看一下在Asp.net环境中如何使用、整合新版本的CKEditor和CKFinder。
CKEditor的配置安装过程
先要从官网下载两个最新版的压缩包,一个是CKEditor,另一个是CKEditor for ASP.NET(官网网址:http://ckeditor.com/)
把CKEditor解压到你网站根目录。
把CKEditor for ASP.NET解压至任意目录,
然后在Visual Studio界面里引用 \你解压的目录\bin\Release\CKEditor.NET.dll这个文件。
接下来就可以在你的网页里加入CKEditor这个控件就可以了。
在ASPX文件页头上注册控件
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
插入控件
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
从CKEditor取得数据
string s = CKEditor1.Text;
给CKEditor赋值
CKEditor1.Text = "Hollo world";
非常简单,对吧。
如果你不需要文件上传功能,那么现在你就可以使用这个在线编辑器了。
怎么配置自定义CKEditor在线编辑器? 这个等下和CKFinder整合的时候一起说。
CKFinder的配置安装过程
要有文件上传功能,就必须要配置CKFinder,过程几乎和CKEditor一样
先要从官网下载最新版的压缩包,ckfinder,(官网网址:http://ckfinder.com/)
解压到你网站根目录。在VS里引用 \你解压的目录\bin\Release\CKFinder.dll这个文件。
打开config.ascx配置文件,修改如下节点
BaseUrl = "/Uploads/" //定义上传目录,注意这个目录必须有写权限 LicenseName = "jpesun.com"; //这是许可网站 LicenseKey = "XXXXXX"; //注册码
要XX掉注册非常简单,这里不就提供方法了。
完成! 你可以先从 \你解压的目录\_samples\aspx/standalone.aspx来测试是上传文件功能是否正常。
但这时CKFinder是一个单独的控件,CKEditor还没有上传功能。需要下一步来整合。
CKEditor的配置,与CKFinder的整合
打开CKEditor目录下的config.js
CKEDITOR.editorConfig = function( config ) { //以下是配置CKEditor编辑器的,更多参数请看帮助文件 config.language = 'zh-cn'; //语言 config.skin = 'v2'; //选择皮肤 //以下是与CKFinder整合 config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth = '800'; //弹出框的大小设置 config.filebrowserWindowHeight = '500'; }; CKFinder.SetupCKEditor(null, '../ckfinder/');//ckfinder对应的实际路径
完成全部,CKEditor在线编辑器功能强大,界面也漂亮,虽然部份功能不太适合国人习惯,但它有强大的自定义功能,相信你一定可以调试出你心仪的在线编辑器。