• ckeditor编辑器在java项目中配置


    一、基本使用:

     1、所需文件架包

    A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

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

     2、配置使用

    A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

    B.在需要使用CKEditor的页面引入CKEditor的支持javascript

    <head>

    <script type="text/javascript" src="/commons/ckeditor/ckeditor.js"></script>

    </head>

     

    C.一般我们的内容是使用一个”<textarea>”来显示内容,然后使用调用脚本替换

    <textarea id="editor1"name="editor1">Initial value.</textarea>

    <script type="text/javascript">CKEDITOR.replace(“editor1”);</script>

    D.CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索,没找到再按name来搜索

    E.具体的图例

    二、Java项目中配置使用:

    1、所需文件架包

    A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

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

    B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

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

     2、配置使用

    A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

    B.将下载下来的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)复制进项目” /WEB-INF/lib”目录;

    C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

    D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

    <textareaid="id_1"name="id_1">Initial value.</textarea> 

    <ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

       * replace 只的是textarea name或者id
    * basePath CKEditor的根目录

    三、Java项目中配置使用并支持简单的图片上传功能:

    CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过showModalDialog来实现的,弊端不支持Chrome浏览器,IE,FireFox支持;

    1、所需文件架包

    A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

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

    B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

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

     2、配置使用

    A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

    B.将下载下来的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)复制进项目” /WEB-INF/lib”目录;

    C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

    D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

    <textareaid="id_1"name="id_1">Initial value.</textarea> 

    <ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

       * replace 只的是textarea name或者id
       * basePath CKEditor的根目录
     

    E简单快捷的给CKEditor加上图片上传功能

     

             CKEditor非常好用,但它的图片/文件上传使用了CKFinder,虽然功能非常强大,但集成起来还是比较麻烦,而且根据应用还需要改造。如果自己的应用已经有图片/文件上传模块,能否直接拿过来用呢?答案是肯定的,而且非常简单,就是在图片链接输入框的右边加个按钮,点击事件链接到已有的上传模块,上传后把图片的url传递给左边的输入框即可。步骤如下:

     打开ckeditorpluginsimagedialogsimage.js,在链接输入框代码结尾也就是“m.lang.image.urlMissing)},”后面加上这些代码:

    “{type:'button',id:'myUpload',align:'center',label:'新上传',onClick:function(){varretFile = showModalDialog("/common/uploadImage.jsp","", "dialogHeight:20;dialogWidth:29;"); if(retFile !=null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},”

     /common/uploadImage.jsp是应用已经有的上传模块链接,上传成功后通过模式对话框的returnValue返回图片链接,比如在上传成功页面加上如下js函数,点击确定时调用。

    function Done() {

      window.returnValue = imgPath;//上传后的图片链接

      window.close();

    }

    四、Java项目中配置使用并支持图片上传功能包括FTP上传,图片压缩:

    CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的,这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties 中配置相关FTP服务器信息,是否压缩图片,上传附件的大小格式限制等。

    1、所需文件架包和配置文件

    A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

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

    B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

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

    C.Apache的上传组包 commons-fileupload,比如:commons-fileupload-1.2.1.jar

       下载地址:http://commons.apache.org/

    D.Apache的上传组包 commons-io,比如:commons-io-1.4.jar

       下载地址:http://commons.apache.org/

    E.Apache的FTP组件包commons-net, 比如:commons-net-ftp-2.0.jar

       下载地址:http://commons.apache.org/

    F.Apache的工具包 commons-lang,比如:commons-lang-2.5.jar

       下载地址:http://commons.apache.org/

    G.上传处理组件包 ckeditor-upload-1.0.jar

             自己封装的基于Servlet的图片上传处理组件

    H.CKEditor的图片上传配置属性文件:ckeditor.properties

    I.CKEditor的配置文件 config.js

    备注:点击下载以上资源包

     2、配置使用

    A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

    B.将下载下来的所需组件架包拷贝进项目” /WEB-INF/lib”目录;

             C.将图片上传配置文件ckeditor.properties拷贝到项目SRC(classes)根目录下

              属性文件内容如下:

    # default allowed extensionssettings

    ckeditor.resourceType.media.extensions.allowed=.aiff|.asf|.avi|.bmp|.fla|.flv|.gif|.jpeg|.jpg|.mid|.mov|.mp3|.mp4|.mpc|.mpeg|.mpg|.png|.qt|.ram|.rm|.rmi|.rmvb|.swf|.tif|.tiff|.wav|.wma|.wmv

    # base directory for the userfiles relative to the context root

    ckeditor.userFilesPath = /files/ckeditor/

    # default encoding

    ckeditor.encoding = UTF-8

    # default file size threshold: 1*1024*1024 = 1048576

    ckeditor.size.threshold = 1048576

    # default one file size :5*1024*1024 = 52428800

    ckeditor.file.size.max = 52428800

    # default all files size :10*1024*1024 = 10485760

    ckeditor.size.max = 10485760

    # some messages

    message.request.not.contain.images= Requestdoes not contain image or media file.

    message.request.general.form = Request is thegeneral form.

    message.request.file.max = One file is toolarge.

    message.request.all.file.max = All files is toolarge.

    # ftp configurations

    # open ftp file upload istrue otherwise false

    ftp.upload = true

     

    ftp.server = 127.0.0.1

    ftp.user_name = jjy

    ftp.password = 123

    ftp.port = 21

     

    # image resize configurations

    # open image resize is trueotherwise false

    image.resize = true

    #resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3

    image.resize.type = 0

    # resize size 100,120,240,400,640

    image.resize.size = 120,240,400

    D.CKEditor配置文件” /ckeditor/config.js”修改

    CKEDITOR.editorConfig = function(config) {

        //获取项目的目录比如:http://www.mymyty.com

        var strFullPath = window.document.location.href;

        var strPath = window.document.location.pathname;

        var pos = strFullPath.indexOf(strPath);

        var prePath = strFullPath.substring(0,pos);

        var postPath =strPath.substring(0,strPath.substr(1).indexOf('/')+1);

        var path_url = prePath+postPath;

     

        //显示出图片上传模块 

        config.pasteFromWordRemoveStyles = true;

        config.filebrowserImageUploadUrl = path_url + "/commons/ckeditor/images/upload.html"//为图片上传处理Servletweb.xml中配置

     

        // 去掉ckeditor保存按钮 

        config.removePlugins = 'save';

    };

    E.在web.xml中配置Servlet

      <servlet>

        <servlet-name>ckeditor</servlet-name>

        <servlet-class>com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet</servlet-class>

           <load-on-startup>1</load-on-startup>

        </servlet>

    <servlet-mapping>

         <servlet-name>ckeditor</servlet-name>

         <url-pattern>/commons/ckeditor/images/upload.html</url-pattern>

    </servlet-mapping>

    F.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

    G.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

    <textareaid="id_1"name="id_1">Initial value.</textarea> 

    <ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

       * replace 只的是textarea name或者id
    * basePath CKEditor的根目录

    五、CKEditorconfig.js配置文件的说明即样式自定义调整:

    Congfig.js是CKDitor的配置文件,在这个里面可以修改编辑器的样式和所需工具栏等等

    config.language= 'zh-cn';         // 编辑器语言
    config.width =600;                  //初始化时的宽度

    config.height = 400;           //初始化时的高度
    config.skin='kama';        //编辑器样式,有三种:’kama’(默认)、’office2003′、’v2′
    config.tabSpaces =4;               
    config.resize_maxWidth =600;    //如果设置了编辑器可以拖拽 这是可以移动的最大宽度
    config.toolbarCanCollapse =false;             //工具栏可以隐藏
    //config.toolbarLocation ='bottom';       //可选:设置工具栏在整个编辑器的底部bottom
    config.resize_minWidth =600;    //如果设置了编辑器可以拖拽 这是可以移动的最小宽度
    config.resize_enabled =false;            //如果设置了编辑器可以拖拽

    //以下是后添加的验证非法数据
    config.protectedSource.push(/<s*iframe[sS]*?>/gi); //<iframe>tags.              
    config.protectedSource.push(/<s*frameset[sS]*?>/gi); // <frameset> tags.
    config.protectedSource.push(/<s*frame[sS]*?>/gi); // <frame> tags.
    config.protectedSource.push(/<s*script[sS]*?/scripts*>/gi); // <SCRIPT> tags.

    config.baseFloatZIndex = 10000;   // 编辑器的z-index值

    config.baseHref = “”;    //设置是使用绝对目录还是相对目录,为空为相对目录

    六、CKEditor精简说明:

    下载了完整的程序之后,先要对程序中的不必要的东西进行删除。凡是文件名或文件夹名前面有"_"的文件或文件夹都可以删除,这些文件是一些说明文件或者实例文件。另外,./lang文件夹中,只保留:zh_cn.js,en.js文件即可,这个文件夹是程序的语言包,因为其它语言大家用不到,放在那里也占用空间,所以删掉。./skins文件夹是编辑器的界面,根据情况保留至少一个文件夹即可,其中kama是可自定颜色UI的文件,建议保留,当然如果不在乎空间大小的话,也可以全部上传。删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).

  • 相关阅读:
    【Swift后台】环境安装
    【Swift后台】背景介绍
    【Swift后台】目录
    退居三线iOS开发的自主开发历程
    Swift调用微信支付宝SDK(Swift4.0)
    ORACLE取对照表不等的数据
    Binary转换成Hex字符串
    利用OpenSSL创建证书链并应用于IIS7
    sysctl.conf和limit.conf备忘待查
    Use Wireshark to capture loopback traffic without a loopback adapter (转)
  • 原文地址:https://www.cnblogs.com/qcnh/p/3760883.html
Copyright © 2020-2023  润新知