zoukankan      html  css  js  c++  java
  • 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';
    

      

  • 相关阅读:
    dnu restore 获取失败后的处理
    解决中文乱码问题
    myeclipse10+tomcat6+java8+Struts2.3+win10配置全过程
    Matlab画图plot(X1,Y1,'b -',x1,y1,'ro','MarkerFaceColor','r')
    matlab进行数值近似积分,含变化的常数做为参数
    C#为自定义控件添加事件,以便在使用此控件的窗口进行编辑调用
    C#新添加的控件被旧的遮挡
    C#遍历容器存储顺序
    记一次VMware15.5.1-15018445(版本号)安装与激活,和安装Ubuntu-18.04.4-desktop-amd64(版本号)的过程
    记事本2
  • 原文地址:https://www.cnblogs.com/dmeiyang002/p/3808307.html
Copyright © 2011-2022 走看看