本帖最后由 Landroid 于 2012-4-20 17:31 编辑
著名的开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor。原来叫FCK,是因为最初的开发者叫FredericoCalderia Knabben;现在叫CK,意指"Content and Knowledge"。新版的编辑器的更新包括:新的用户界面,一个支持Plug-in的Javascript API,并提供对视觉障碍者的使用支持。" 据官方的解释,CK是对FCK的代码的完全重写,而且此项工作从2007年就开始了,并在今年初发表了多个测试版。
下面进入正题: 先演示我配置好的CKEditor界面 界面1、两个编辑区域及取值
界面2、两个编辑区共用同一个工具栏 样例目录 Bin文件夹中CKEditor.Net.dll和CKFinder.dll Ckeditor中为编辑功能的资源文件及配置文件 Ckfinder为上传文件功能的资源文件及配置文件 test0,test1为两个样例页面, Web.config为配置文件中添加的<pages><controls>(主要是为了方便使用,不需要在每个页面中注册控件)
配置说明: 编辑器的配置,基本都有注释了,这里只写了我修改的部分,其他配置采用默认 Ckeditor\config.js - /*
- Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
- For licensing, see LICENSE.html or http://ckeditor.com/license
- */
- CKEDITOR.editorConfig = function( config )
- {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- config.uiColor = '#dfe8f6';//自定义的皮肤颜色
- config.skin = 'kama'; //选择皮肤,源文件在“ckeditor\skins\”中
- config.resize_enabled = true;
- // 基础工具栏
- // config.toolbar = "Basic";
- // 全能工具栏
- // config.toolbar = "Full";
- // 自定义工具栏
- config.toolbar =
- [
- ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
- ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
- ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
- ['Image', 'Table', 'HorizontalRule', 'Link', 'Unlink'], ['Source', 'Preview'],
- '/',
- ['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript','TextColor', 'BGColor']
- ];
- //config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..."
- //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';//flash上传
- //config.filebrowserWindowWidth = '800'; //“浏览服务器”弹出框的size设置
- //config.filebrowserWindowHeight = '500';
- //CKFinder.SetupCKEditor(null, 'ckfinder/'); //注意ckfinder的路径对应实际放置的位置
- };
复制代码
上传控件的配置 Ckfinder\config.ascx 代码太多,就不粘了 20行 return true;// Context.User.Identity.IsAuthenticated; 是否允许上传 35行 BaseUrl= "~/ckfinder/userfiles/"; 上传文件路径设置,不要设置错 157、164、171行里列举了文件格式
好了,配置就先说这么多 接下来讲使用 在页面中直接添加(其他属性自己设置,这里只是举例) <CKEditor:CKEditorControl ID="CKEditor1" runat="server" Height="200"> </CKEditor:CKEditorControl> 后台 赋值: this.CKEditor1.Text= "我是测试文本,在页面第一次加载的时候写的。可以删除<ul><li>一行</li><li>二行</li><li>三行</li></ul>我真的是测试文本";
取值: lbl1.Text = this.CKEditor1.Text;
其他的,请大家自己研究吧~ 详细配置见readme.txt 文件超过2M了,所以分成两部分了 1 2
解压后,ckeditor和ckfinder需要放在网站根目录下添加引用 bin文件夹中的dll即可
样例页面,可以丢弃。。。
|