FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 17897|回复: 11
打印 上一主题 下一主题

CKEditor

[复制链接]
跳转到指定楼层
楼主
发表于 2012-4-20 17:25:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 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界面
界面1、两个编辑区域及取值

界面2、两个编辑区共用同一个工具栏
         样例目录
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. */

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



上传控件的配置
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即可
样例页面,可以丢弃。。。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
沙发
 楼主| 发表于 2012-4-20 17:27:04 | 只看该作者
本帖最后由 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/


板凳
发表于 2012-4-20 17:58:52 | 只看该作者
我自己也整合过,发现个问题。CKEditor在contentpanel中如果设定宽度,在上传图片点浏览服务器页面就会出问题。类似于下面的样子,不知道你的是不是这样?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
地板
发表于 2012-4-20 18:01:25 | 只看该作者
  //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那个页面还能正常弹出来吗?
5#
 楼主| 发表于 2012-4-20 18:09:55 | 只看该作者
michenboa 发表于 2012-4-20 18:01
//config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder ...

能弹出来,但是上传的时候会有问题。。嗯,我得再仔细瞧瞧
6#
发表于 2012-4-20 18:16:01 | 只看该作者
本帖最后由 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>
复制代码


效果图:

textbox与fileupload前面的的标签为什么不显示了?
之后我把textbox与fileupload的长度改为450px,效果如下


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


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
7#
发表于 2012-4-20 18:18:49 | 只看该作者
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";

我是这么写的,估计一下最深的页面所在的位置,之后根据情况加../往上跳就行了
8#
 楼主| 发表于 2012-4-20 18:31:23 | 只看该作者
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中
9#
 楼主| 发表于 2012-4-20 18:40:02 | 只看该作者
michenboa 发表于 2012-4-20 18:16
再麻烦问个问题。
代码:

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

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


超链接与高级选项我觉得用户基本用不上,怎么才能不让它们显示呢? 需要改什么地方?
我发现点浏览服务器加载CKFinder的网页时间很长,你的呢?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-4-29 11:20 , Processed in 0.052639 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表