深蓝网络

网站建设,程序开发,主机域名,搜索引擎

在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在线编辑器功能强大,界面也漂亮,虽然部份功能不太适合国人习惯,但它有强大的自定义功能,相信你一定可以调试出你心仪的在线编辑器。


上一篇  |  下一篇

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。