1.文本编辑器-->CKEditor+CKFinder使用与配置

一、CKEditor介绍

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

  CKEditor下载地址:http://ckeditor.com/download

  CKFinder(免费版本)下载地址:http://cksource.com/ckfinder/download

  CKEditorAPI:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

  

二、安装使用

  本文使用版本:CKEditor:4.4.2,CKFinder:2.4.1

  1.将下载解压后的文件,放到同级目录下。需要注意的是CKFinder的_source文件夹下存放的是上传图片源码。两个文件夹有很多东西是不需要的,根据个人情况可做适当删除。

  2.引用CKEditor核心JS文件<script src="~/Content/js/plugins/ckeditor/ckeditor.js"></script>

  3.替换textarea标签。

    CKEDITOR.replace( 'textarea_nameorid',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

  options也可以直接写到config.js文件中

     CKEDITOR.editorConfig = function( config )
    {
        config.toolbar= 'Basic';
        config.uiColor = '#9AB8F3';
    };

  定制自己的config.js

    CKEDITOR.replace( 'textarea_nameorid',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

  4.新版CKEditor取消了自动同步内容功能,提交表单前手动同步内容

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }    

  5.新版CKEditor取消了上次本地图片功能。为了实现本地图片上传,需要配合使用CKFinder插件

  1>添加bin目录下的dll项目引用。(注:代码是开源的,不懒的同志可以从_source目录下打开项目,编写适合自己的代码)

  2>修改config.ascx文件

    public override bool CheckAuthentication()
    {
        return true;
    }

  BaseUrl = "/Upload/CKFinder/"

  3>引用CKFinder核心JS文件<script src="~/Content/js/plugins/ckfinder/ckfinder.js"></script>

   4>关联CKEditor和CKFinder这两个插件,打开CKEditor的config.js,贴入以下代码

    var ckfinderPath = "/Content/js/plugins/ckfinder"; //ckfinder路径

    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder.html';

    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder.html?type=Images';

    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder.html?type=Flash';

    config.filebrowserUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

    config.filebrowserFlashUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

  

你可能感兴趣的:(ckeditor)