FineUI 官方论坛

标题: CKEditor [打印本页]
作者: Landroid    时间: 2012-4-20 17:25
标题: CKEditor
本帖最后由 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年就开始了，并在今年初发表了多个测试版。
以上摘自：百度百科 http://baike.baidu.com/view/2835069.htm

下面进入正题：
先演示我配置好的CKEditor界面
[attach]313[/attach]
界面1、两个编辑区域及取值
[attach]314[/attach]

界面2、两个编辑区共用同一个工具栏
         样例目录
[attach]315[/attach]
Bin文件夹中CKEditor.Net.dll和CKFinder.dll
Ckeditor中为编辑功能的资源文件及配置文件
Ckfinder为上传文件功能的资源文件及配置文件
test0，test1为两个样例页面，
Web.config为配置文件中添加的<pages><controls>（主要是为了方便使用，不需要在每个页面中注册控件）

配置说明：
编辑器的配置，基本都有注释了，这里只写了我修改的部分，其他配置采用默认
Ckeditor\config.js
  1. /*
  2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.html or http://ckeditor.com/license
  4. */

  6. CKEDITOR.editorConfig = function( config )
  7. {
  8.         // Define changes to default configuration here. For example:
  9.         // config.language = 'fr';
  10.     config.uiColor = '#dfe8f6';//自定义的皮肤颜色
  11.     config.skin = 'kama'; //选择皮肤，源文件在“ckeditor\skins\”中
  12.     config.resize_enabled = true;
  13.     // 基础工具栏
  14.     // config.toolbar = "Basic";   
  15.     // 全能工具栏
  16.     // config.toolbar = "Full";   
  17.     // 自定义工具栏
  18.     config.toolbar =
  19.         [
  20.         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
  21.         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
  22.         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  23.         ['Image', 'Table', 'HorizontalRule', 'Link', 'Unlink'], ['Source',  'Preview'],
  24.     '/',
  25.         ['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript','TextColor', 'BGColor']
  26.         ];
  27.     //config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..."
  28.     //config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
  29.     //config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
  30.     //config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';//文件上传
  31.     config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//图片上传
  32.     //config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//flash上传
  33.     //config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
  34.     //config.filebrowserWindowHeight = '500';
  35.     //CKFinder.SetupCKEditor(null, 'ckfinder/'); //注意ckfinder的路径对应实际放置的位置
  36. };
复制代码



上传控件的配置
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
[attach]316[/attach]
2
[attach]317[/attach]

解压后，ckeditor和ckfinder需要放在网站根目录下添加引用 bin文件夹中的dll即可
样例页面，可以丢弃。。。


作者: Landroid    时间: 2012-4-20 17:27
本帖最后由 Landroid 于 2012-4-20 18:33 编辑

目前我的设置，只能上传图片，上传图片位置在ckfinder\userfiles\images\中
假如使用ckeditor的页面不在网站根目录下，可以在该页面后台代码中设置上传页面的路径
或者在config.js中修改也可以
this.CKEditor1.FilebrowserImageUploadUrl = "../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";



CKEditor官网地址
http://ckeditor.com/


作者: michenboa    时间: 2012-4-20 17:58
我自己也整合过，发现个问题。CKEditor在contentpanel中如果设定宽度，在上传图片点浏览服务器页面就会出问题。类似于下面的样子，不知道你的是不是这样？
[attach]318[/attach]
作者: michenboa    时间: 2012-4-20 18:01
  //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上传


如果你的引用CKEditor的页面文件打比方在ABC/DEF/文件夹下，CKFinder那个页面还能正常弹出来吗？
作者: Landroid    时间: 2012-4-20 18:09
michenboa 发表于 2012-4-20 18:01
//config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder ...

能弹出来，但是上传的时候会有问题。。嗯，我得再仔细瞧瞧
作者: michenboa    时间: 2012-4-20 18:16
本帖最后由 michenboa 于 2012-4-20 18:21 编辑

再麻烦问个问题。
代码：
  1. <ext:PageManager ID="PageManager1" runat="server"/>
  2. <ext:ContentPanel ID="ContentPanel1" runat="server" EnableBackgroundColor="True"
  3. ShowBorder="true" ShowHeader="False" Width="500px">
  4. <ext:Panel ID="Panel1" Title="Panel" ShowHeader="False" ShowBorder="False" EnableBackgroundColor="true" runat="server">
  5. <Items>
  6. <ext:TextBox ID="TextBox1" Label="标题" Text="" runat="server" Required="True" ></ext:TextBox>
  7. <ext:FileUpload ID="FileUpload1" Label="展示图" runat="server"></ext:FileUpload>
  8. </Items>
  9. </ext:Panel>
  10. <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"></CKEditor:CKEditorControl>
  11. <ext:Button ID="Button1" runat="server" Text="提交"></ext:Button>
  12. </ext:ContentPanel>
复制代码


效果图：
[attach]319[/attach]
textbox与fileupload前面的的标签为什么不显示了？
之后我把textbox与fileupload的长度改为450px，效果如下
[attach]320[/attach]

fileupload就那么点儿了。。。
我想让textbox与fileupload与CKEditor一样长就行
以上的问题该怎么解决呢？？


作者: michenboa    时间: 2012-4-20 18:18
Landroid 发表于 2012-4-20 18:09
能弹出来，但是上传的时候会有问题。。嗯，我得再仔细瞧瞧

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

我是这么写的，估计一下最深的页面所在的位置，之后根据情况加../往上跳就行了
作者: Landroid    时间: 2012-4-20 18:31
michenboa 发表于 2012-4-20 18:18
config.filebrowserBrowseUrl = "../../../ckfinder/ckfinder.html";
    config.filebrowserImageBrows ...

是的，需要找到那个ckfinder
后台代码中也可以这样修改
this.CKEditor1.FilebrowserImageUploadUrl = "../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";

textbox是表单元素，放在form中
作者: Landroid    时间: 2012-4-20 18:40
michenboa 发表于 2012-4-20 18:16
再麻烦问个问题。
代码：

建议外部使用form
formrow中加contentpanel再加ckeditor
这样，外部的样式是由form控制的，风格统一

contentpanel里的表单元素是不显示label的
作者: michenboa    时间: 2012-4-20 19:10
Landroid 发表于 2012-4-20 18:31
是的，需要找到那个ckfinder
后台代码中也可以这样修改
this.CKEditor1.FilebrowserImageUploadUrl = ".. ...

[attach]321[/attach]
超链接与高级选项我觉得用户基本用不上，怎么才能不让它们显示呢？ 需要改什么地方？
我发现点浏览服务器加载CKFinder的网页时间很长，你的呢？
作者: michenboa    时间: 2012-4-20 19:15
Landroid 发表于 2012-4-20 18:40
建议外部使用form
formrow中加contentpanel再加ckeditor
这样，外部的样式是由form控制的，风格统一

谢谢了，问题解决了。
formrow中的内容如何居中呢？
作者: Landroid    时间: 2012-4-20 22:03
本帖最后由 Landroid 于 2012-4-20 22:04 编辑
michenboa 发表于 2012-4-20 19:10
超链接与高级选项我觉得用户基本用不上，怎么才能不让它们显示呢？ 需要改什么地方？
我发现点浏览服务 ...

看了快两个小时的js代码 要修改的话，得修改ckeditor/plugins/images/dialogs/image.js
但是，这个改动。。。我已经看晕了
至于浏览服务器那块，我的设置是不允许用户浏览（我的项目中用户比较多）




欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4