java与ckeditor和ckfinder整…

2024-05-26 01:58
文章标签 java ckeditor ckfinder

本文主要是介绍java与ckeditor和ckfinder整…，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意把网站上下文配到BaseURL中 否则插入文本的url有问题
原文地址：java与ckeditor和ckfinder整合后实现上传图片功能 作者：daring的美丽人生

最近在java项目中要用到图片上传功能，因为之前没接触过ckeditor在线编辑器，在网上也搜索了很多例子和使用方法，结合自己的项目做了出来，在此总结出来，希望对大家有所帮助

1，下载ckeditor_3.6.2.zip和ckfinder_java_2.1.zip，然后分别解压出来为ckeditor文件和ckfinder文件，

2，把解压出来的文件复制放在项目中webRoot目录下（注：ckfinder是复制解压出来的ckfinder文件下的CKFinderJava.war再解压后的CKFinderJava文件目录下的）

 

3，在jsp页面导入js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

然后在jsp页面中引入在线编辑器

             <textarea rows="20" cols="70" name="content"></textarea>
               <script type="text/javascript">
                 if( CKEDITOR.instances['content'] ){   //解决 例外被抛出且未被接住 问题  
                   CKEDITOR.remove(CKEDITOR.instances['content']);   
                   }    

                  var editor =CKEDITOR.replace("content");//引号中的字符串要和文本域中name的值一致
                 CKFinder.setupCKEditor(editor,'ckfinder/');
             
               </script>

4，配置config.xml文件

<config>

 <!-- 开启上传功能，如果为false为提示
 ：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
 并且默认你是是为false的 -->
 <enabled>true</enabled>

 <!-- 文件存放的地址    /ckfinder/userfiles/   (自动创建) -->
 <baseURL>/userfiles/</baseURL>
 
 
 <!--检查双扩展名   -->
 <checkDoubleExtension>true</checkDoubleExtension>
 
 <!-- 在缩放后检查大小 -->
 <checkSizeAfterScaling>true</checkSizeAfterScaling>
 

 <!-- 配置路径以及格式 -->
 <types>
  <type name="Files">
   <url>�SE_URL%files/</url>
   <directory>�SE_DIR%files</directory>
   <maxSize>0</maxSize>
   

<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,ppt

x,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip
   </allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
  <type name="Images">
   <url>�SE_URL%images/</url>
   <directory>�SE_DIR%images</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
  <type name="Flash">
   <url>�SE_URL%flash/</url>
   <directory>�SE_DIR%flash</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>swf,flv</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
 </types>
 
 <!--  可允许的操作  -->
 <accessControls>
  <accessControl>
   <role>*</role>
   <resourceType>*</resourceType>
   <folder>/</folder>
   <folderView>true</folderView>
   <folderCreate>true</folderCreate>
   <folderRename>true</folderRename>
   <folderDelete>true</folderDelete>
   <fileView>true</fileView>
   <fileUpload>true</fileUpload>
   <fileRename>true</fileRename>
   <fileDelete>true</fileDelete>
  </accessControl>
 </accessControls>
 <thumbs>
  <enabled>true</enabled>
  <url>�SE_URL%_thumbs/</url>
  <directory>�SE_DIR%_thumbs</directory>
  <directAccess>false</directAccess>
  <maxHeight>100</maxHeight>
  <maxWidth>100</maxWidth>
  <quality>80</quality>
 </thumbs>
 
 <!-- 图片浏览——图片缩略图 -->
 <plugins>
  <plugin>
   <name>imageresize</name>
   <class>com.ckfinder.connector.plugins.ImageResize</class>
   <params>
    <param name="smallThumb" value="90x90"></param>
    <param name="mediumThumb" value="120x120"></param>
    <param name="largeThumb" value="180x180"></param>
   </params>
  </plugin>
  <plugin>
   <name>fileeditor</name>
   <class>com.ckfinder.connector.plugins.FileEditor</class>
   <params></params>
  </plugin>
 </plugins>
 <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>


5，配置web.xml文件
 <!-- =================ckeditor+ckfinder图片上传功能的配置=================== -->
   <servlet>
     <!-- servlet的命 名===注册名称，这个名称可以任意的        -->
  <servlet-name>ConnectorServlet</servlet-name>
  <!-- servlet 所在包  -->
  <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
  <init-param>
   <!-- 初始化设置 -->
   <param-name>XMLConfig</param-name>
   <param-value>/WEB-INF/config.xml</param-value>
  </init-param>
  <init-param>
   <!-- 设置是否可以查看debug，在正常时候需要设置为false. -->
   <param-name>debug</param-name>
   <param-value>false</param-value>
  </init-param>
  
  <!--
  
  load-on-startup 元素在web应用启动的时候指定了
  servlet被加载的顺序，它的值必须是一个整数。
  如果它的值是一个负整数或是这个元素不存在，
  那么容器会在该servlet被调用的时候，加载这个servlet
  。如果值是正整数或零，容器在配置的时候就加载并初始化这个servlet，
  容器必须保证值小的先被加载。如果值相等，容器可以自动选择先加载谁。

  
  在此不是必须的
   -->
  <load-on-startup>1</load-on-startup>
 </servlet>
 
 <!-- 映射的相对路径，主要是在其他地方使用，比如js,页面访问  -->
 <servlet-mapping>
  <servlet-name>ConnectorServlet</servlet-name>
  <url-pattern>
   /ckfinder/core/connector/java/connector.java
  </url-pattern>
 </servlet-mapping>

<!-- =================ckeditor+ckfinder图片上传功能的配置结束=================== -->

6，导入需要的jar包，放在lib目录下，这些jar包可以在下载的ckeditor文件和ckfinder文件里找到，如果没找到，也可在网上下载
ckeditor-java-core-3.5.3.jar
CKFinder-2.1.jar
CKFinderPlugin-FileEditor-2.1.jar
CKFinderPlugin-ImageResize-2.1.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
Thumbnailator-0.3.10.jar

7，配置上传路径

在webRoot/ckeditor/config.js中加入下面的内容：

CKEDITOR.editorConfig = function( config )
{

//加入的内容

// Define changes to default configuration here. For example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 
 config.language = 'zh-cn'; // 配置语言
//
//    config.uiColor = '#fff'; // 背景颜色
//
      config.width = '800px'; // 宽度

      config.height = '300px'; // 高度
//
//    config.skin = 'office2003';// 界面v2,kama,office2003
//
//    config.toolbar = 'Full';// 工具栏风格Full,Basic
//   
//    config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' +
//    '隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

 //  config.htmlEncodeOutput = true;
 //config.startupOutlineBlocks = false;



 config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
 //---------------------------文件上传功能的配置结束--------
};

8，到此为止，java与ckeditor和ckfinder的配置已经完成，重启tomcat，重新打开项目就可看到页面上编辑器的文本框，此时点击图像就可以上传了

如图:点击浏览按钮，选择要上传的图片，然后点击上传到服务器上，在图像一栏中可以调节图片大小和位置，点击确定即可完成上传功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

这篇关于java与ckeditor和ckfinder整…的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1003236。

相关文章

Java利用docx4j+Freemarker生成word文档

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr
阅读更多...
SpringBoot首笔交易慢问题排查与优化方案

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题：应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案：提前预热各种资源1. Flowable
阅读更多...
基于SpringBoot+Mybatis实现Mysql分表

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进
阅读更多...
Java编译生成多个.class文件的原理和作用

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类（常规内部类）局部内部类（方法内部类）匿名内部类二、
阅读更多...
SpringBoot实现数据库读写分离的3种方法小结

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一：基于AbstractRoutingDataSource实现动态
阅读更多...
Springboot @Autowired和@Resource的区别解析

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@
阅读更多...
springboot循环依赖问题案例代码及解决办法

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖（即BeanA依赖BeanB,而BeanB又依赖BeanA）,会导致Spring的... 目录1. 什么是循环依赖？2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1：使用 @La
阅读更多...
Java枚举类实现Key-Value映射的多种实现方式

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co
阅读更多...
Elasticsearch 在 Java 中的使用教程

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J
阅读更多...
Java中的String.valueOf()和toString()方法区别小结

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2