`
流星剑
  • 浏览: 91810 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ckeditor的配置(html在线文本编辑器)

    博客分类:
  • .net
阅读更多

 

一.ckeditor 3.3.1精简
  1、删除_samples和_source文件夹,分别为示例文件和未压缩源程序
  2、删除lang文件夹下除zh-cn.js,en.js下的所有语言文件.根据需要删除
  3、删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).
  4、删除skins目录下不需要的皮肤.我一般用V2(简单.朴素)  //如果只保留V2则必须在config.js中指定皮肤
  5、删除根目录下的ckeditor.asp、ckeditor.php、ckeditor_php4.php、ckeditor_php5.php(asp和php版的文件).

二.ckeditor 3.3.1相关文件配置路径
  1、/ckeditor.js   核心文件,调用需加载
  2、/config.js     配置文件,参数配置均在此完成

三.ckeditor应用(.net环境)
   1、引用js脚本
   <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
   2、添加TextBox控件,class设置为ckeditor
   <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine"  Text='' runat="server" />

 四.ckeditor配置(config.js配置文件)
   详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置: //在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。

 

    var ckfinderPath = "./js"; //ckfinder路径在根目录的网站下
    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

    //以上URL值需要根据你ckfinder路径的不同而不同   


    config.language = 'zh-cn'; //配置语言  
    config.width = 650; //宽度   
    config.height = 400; //高度
    config.skin = 'kama'; //编辑器样式(kama、office2003、v2)

    // 取消 “拖拽以改变尺寸”功能
    config.resize_enabled = true;

    // 基础工具栏
    config.toolbar = "Basic";

    // 全能工具栏
    config.toolbar = "Full";

    //自定义工具栏
    config.toolbar =
          [
          ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
          ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
          ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', ]
          ];
一.ckfinder精简

   1、删除_samples和_source文件夹,分别为示例文件和未压缩源程序
   2、删除根目录下changelog.txt,install.txt,license.txt文件
   3、1.x版的删除core/lang目录下除en.js,zh-cn.js的所有语言文件(根据条件删除),2.0的删除lang和core/connector/aspx/lang目录下除en.js,zh-cn.js的所有语言文件;help目录除en外的其他目录

二.ckfinder配置
   1、复制/bin目录下的ckfinder.dll文件至站点bin目录
   2、复制ckfinder目录至站点根目录下(可另选择路径)

三.ckfinder应用
  1、与ckeditor集成,详情见官方文档,官方文档是加载修改,我用的方法是全局修改.

下面是ckfinder的config.ascx文件,找到下面的代码,然后对应着修改 // The base URL used to reach files in CKFinder through the browser.

BaseUrl = "~/ckfinder/userfiles/";//注意这里的路径为跟目录下(绝对路径)

   注意:本实例的代码提供下载,仅供参考!

 

 

分享到:
评论

相关推荐

    富文本编辑器CKEditor配置及图片上传配置

    一、ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载,也可以下拉到 CKEditor 4 – previous versions 进行版本选择下载 2.解压并配置 解压压缩包打开 ...

    ckeditor+ckfinder富文本编辑器实现jsp图片上传以及显示功能,完美直接运行,不用修改

    这是myeclipse工程,直接新建工程,导入工程就能运行。...如果要插入到数据库中,获取其name值即可,保存到数据库,然后在页面中取出来即可,因为这个富文本编辑器保存的是html代码 PS:其他功能请自己发现亮点。

    解决文本编辑器展示样式不一致

    用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...

    HTML文本编辑器(使用的ckeditor_3.2.1版本)

    在进行word 或者 excl 原本复制时,原本内容及样式的没有粘贴上,需要进行配置

    ckeditor5-custom-element:在ckeditor5中插入自定义元素(html标记)

    创建的元素的html转换如下所示:&lt;CustomTag&gt;placeholder text安装使用NPM安装: npm install ckeditor5-custom-element 要添加此插件的功能,您应该对编辑器进行自定义构建。 请按照的说明进行操作。 要加载插件,...

    fckeditor教程视频链接

    FCKeditor(现在被称为CKEditor)是一个用于在Web应用程序中编辑HTML内容的开源富文本编辑器。它允许用户通过一个类似于常见文字处理软件的界面编辑和格式化文本,并具有许多常见的编辑功能,如文本样式、链接、图像...

    Preside-Editor:Preside编辑器只是CKEditor的基线配置,已插入到主项目中

    CKEditor 4是要在网页内使用的文本编辑器。 它不能替代Word或OpenOffice等桌面文本编辑器,而是可以用作Web应用程序和网站的一部分的组件。 文献资料 完整的编辑器文档可从以下地址在线获得: : 安装 安装CKEditor...

    sanitize-html:清理用户提交HTML,在每个元素的基础上保留列入白名单的元素和列入白名单的属性。 建立在htmlparser2上以提高速度和容忍度

    它非常适合清除HTML片段,例如CKEditor和其他富文本编辑器创建的片段。 从Word复制和粘贴时,删除多余CSS特别方便。 sanitize-html允许您指定要允许的标签,以及每个标签的允许属性。 如果不允许使用标签,则不会...

    MH_Widget:小部件系统

    这个包的主要目的是与像 CKEditor 这样的文本编辑器一起使用,为最终用户实现一个灵活的小部件系统( ) 这个包将提供一个漂亮和整洁的界面来创建可在任何项目中使用的小部件,有很多开箱即用的功能,但其灵活的...

    swarm-document-agent:以太坊网络上Swarm的文档代理。 Markdown编辑和阅读

    群文档代理文献资料大纲为了将库合并到一个大项目中,并使它们的构建... 编辑器捕获片段字符串,向群体请求降价文件。 为了使CKEDITOR能够读取它,需要将其转换为HTML。 是的。 此时,它将其弹出到CKEDITOR文本字段中

    Java资源包01

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    JAVA上百实例源码以及开源项目源代码

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

    java开源包1

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包11

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包2

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包3

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包6

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包5

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

    java开源包10

    Spring4GWT ...JARP是为petri 网提供的一个Java编辑器,基于ARP分析器。可以将网络图导出为 GIF, JPEG, PNG, PPM, ARP and PNML (XML based)文件格式。使用了优秀的JHotDraw 5.2 框架。 activemq...

Global site tag (gtag.js) - Google Analytics