CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一

Ckediter不支持文件上传,配合CkFinder插件使用

1.导入jar包,将CKFinder中的类放入src下

首先关闭eclipse的validate功能:

然后去掉项目的校验

  

修改配置文件:config.xml

上传文件的配置改为 true , url前加上项目名称

<config><!--CKFinder : Configuration File - Basic InstructionsIn a generic usage case, the following tasks must be done to configure CKFinder:1. Check the baseDir and baseUrl options;2. If available, paste your license key in the "licenseKey" setting;3. Enable CKFinder using the "enabled" setting.WARNING : DO NOT simply set "enabled" to "true" on a production site. By doing so, you are allowing "anyone" to upload and list the files in your server. You must implementsome kind of session validation.http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending--><!-- 上传文件 -->  <enabled>true</enabled><!--Configure the location of uploaded files. See the following article for more details:http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir--><baseDir></baseDir><baseURL>/userfiles/</baseURL><licenseKey></licenseKey><licenseName></licenseName><!--Set the maximum size of uploaded images. If an uploaded image is larger, itgets scaled down proportionally. Set to 0 to disable this feature.--><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><!--See the following article for more details:http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/URI_Encoding--><uriEncoding>UTF-8</uriEncoding><!--ResourceType : defines the "resource types" handled in CKFinder. A resourcetype is nothing more than a way to group files under different paths, each onehaving different configuration settings.Each resource type name must be unique.When loading CKFinder, the "type" querystring parameter can be used to displaya specific type only. If "type" is omitted in the URL, the"DefaultResourceTypes" settings is used (may contain the resource type namesseparated by a comma). If left empty, all types are loaded.maxSize is defined in bytes, but shorthand notation may be also used.Available options are: G, M, K (case insensitive).1M equals 1048576 bytes (one Megabyte), 1K equals 1024 bytes (one Kilobyte), 1G equals one Gigabyte.Example: 'maxSize' => "8M",==============================================================================ATTENTION: Flash files with `swf' extension, just like HTML files, can be used
    to execute JavaScript code and to e.g. perform an XSS attack. Grant permission to upload `.swf` files only if you understand and can accept this risk.==============================================================================--><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>/elecproject%BASE_URL%files/</url><directory>%BASE_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,pptx,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>/elecproject%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>0</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>/elecproject%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>0</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><!--The session variable name that CKFinder must use to retrievethe "role" of the current user. The "role", can be used in the "accessControls"settings (bellow).--><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><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>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><!--Increases the security on an IIS web server.If enabled, CKFinder will disallow creating folders and uploading files whose names contain characters that are not safe under an IIS web server.--><disallowUnsafeCharacters>false</disallowUnsafeCharacters><!--Due to security issues with Apache modules, it is recommended to leave thefollowing setting enabled.How does it work? Suppose the following:- If "php" is on the denied extensions list, a file named foo.php cannot beuploaded.- If "rar" (or any other) extension is allowed, one can upload a file namedfoo.rar.- The file foo.php.rar has "rar" extension so, in theory, it can be alsouploaded.In some conditions Apache can treat the foo.php.rar file just like any PHPscript and execute it.If CheckDoubleExtension is enabled, each part of the file name after a dot ischecked, not only the last part. In this way, uploading foo.php.rar would bedenied, because "php" is on the denied extensions list.--><checkDoubleExtension>true</checkDoubleExtension><!--Indicates that the file size (maxSize) for images must be checked onlyafter scaling them. Otherwise, it is checked right after uploading.--><checkSizeAfterScaling>true</checkSizeAfterScaling><!--Perform additional checks for image filesif set to true, validate image size--><secureImageUploads>true</secureImageUploads><!--For security, HTML is allowed in the first Kb of data for files having thefollowing extensions only.--><htmlExtensions>html,htm,xml,js</htmlExtensions><!--Force ASCII names for files and folders. If enabled, characters with diactric marks will be automatically converted to ASCII letters.--><forceASCII>false</forceASCII><!--Folders to not display in CKFinder, no matter their location.No paths are accepted, only the folder name.The * and ? wildcards are accepted.".*" disallows the creation of folders starting with a dot character.--><hideFolders><folder>.*</folder><folder>CVS</folder></hideFolders><!--Files to not display/upload in CKFinder, no matter their location.No paths are accepted, only the file name, including extension.The * and ? wildcards are accepted.--><hideFiles><file>.*</file></hideFiles><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>

 然后修改web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"><!-- struts2的核心过滤器 --><filter><filter-name>StrutsPrepareAndExecuteFilter</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>StrutsPrepareAndExecuteFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- 监听器,web容器启动spring --><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:beans.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><display-name>elec</display-name><welcome-file-list><welcome-file>index.jsp</welcome-file>
<!--     <welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file> --></welcome-file-list><!------------------ CKEditor+CKFinder文本编辑器,begin--------------------- --><servlet><servlet-name>ConnectorServlet</servlet-name><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><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping><filter><filter-name>FileUploadFilter</filter-name><filter-class>com.ckfinder.connector.FileUploadFilter</filter-class><init-param><param-name>sessionCookieName</param-name><param-value>JSESSIONID</param-value></init-param><init-param><param-name>sessionParameterName</param-name><param-value>jsessionid</param-value></init-param></filter><filter-mapping><filter-name>FileUploadFilter</filter-name><url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern></filter-mapping><session-config><session-timeout>10</session-timeout></session-config>  <!-- CKEditor+CKFinder文本编辑器,end --></web-app>

然后修改

ckeditor/config.js

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/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.language = 'zh-cn'; //配置语言config.uiColor = '#FFF'; //背景颜色config.width = 400; //宽度config.height = 400; //高度config.skin = 'office2003'; //编辑器皮肤样式// 取消 “拖拽以改变尺寸”功能config.resize_enabled = false;// 使用基础工具栏//config.toolbar = "Basic";// 使用全能工具栏//config.toolbar = "Full";//使用自定义工具栏config.toolbar =[['Source', '-'],['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'],'/',['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],['Link', 'Unlink', 'Anchor'],'/',['Format', 'Font', 'FontSize'],['TextColor', 'BGColor'],['Maximize', 'ShowBlocks', '-', 'About']];/*** 文件上传功能的配置-----------------------*/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';};

在对应的页面actingIndex.jsp中加入

<script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckeditor.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/ckeditor/ckfinder.js"></script>

然后加入:

<tr><td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况:</td><td class="ta_01" bgcolor="#ffffff" style="word-break: break-all"><s:textarea name="stationRun" id="stationRun" cssStyle="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" οnkeydοwn="if(event.keyCode==13)addEnter('stationRun');"></s:textarea> <script type="text/javascript">CKEDITOR.replace("stationRun",{height:200,width:820});</script><!-- <textarea name="stationRun" id="stationRun"   style="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" οnkeydοwn="if(event.keyCode==13)addEnter('stationRun');">9点站点运行正常</textarea> --></td></tr>

<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况:</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssStyle="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" οnkeydοwn="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<script type="text/javascript">
CKEDITOR.replace("devRun",{height:200,width:820});
</script>
</td>
</tr>

同时去掉原先的js

  window.οnlοad=function(){//    checkTextAreaLen();}

此时能进行编辑,但是无法上传图片:

上传图片失败的原因是:fck的servlet被struts2转发了

    <!--  * struts2的核心过滤器 --><filter><filter-name>StrutsPrepareAndExecuteFilter</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>StrutsPrepareAndExecuteFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

解决办法:在web.xml文件中修改filter-mapping:

    <!--  * struts2的核心过滤器 --> <!-- 加入ck插件之后,需要修改过滤器过滤内容 ,方式拦截其他内容  --><filter><filter-name>StrutsPrepareAndExecuteFilter</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class></filter><filter-mapping><filter-name>StrutsPrepareAndExecuteFilter</filter-name><url-pattern>*.do</url-pattern><url-pattern>*.jsp</url-pattern></filter-mapping>

上传文件成功

上传flash:

更换编辑器样式:

 

转载于:https://www.cnblogs.com/taiguyiba/p/6323531.html

电力项目十--整合文本编辑器相关推荐

  1. vue整合文本编辑器

    场景说明: 后端输入一篇文章,在前端显示,这时就有个排版问题了.单纯的文本输入框无法满足要求. 所以需要采用后端整合文本编辑器,前端(vue)采用v-html标签直接渲染 小编的示例是整合vue 0. ...

  2. 解决spring 类型项目 ueditor富文本编辑器上传图片等文件失败问题

    工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...

  3. Python项目中用富文本编辑器展示精美网页

    富文本编辑器实现效果图: 左侧编辑区域,右侧渲染到HTML显示效果,除了渲染时候代码样式有所不同,其他标题.文字.图片基本满足所见即所得的效果 下面讲解富文本编辑器在Django项目中如何使用 1.前 ...

  4. springboot 整合文本编辑器(图片上传)

    Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...

  5. vue项目 vue-quill-editor富文本编辑器+图片上传

    目录 基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...

  6. python基础项目实战-简易文本编辑器

    在这里我简单编写了文本编辑器的部分功能,还有一些没有完善,感兴趣的友友们可以自己尝试完善后面的功能.文本编辑器的基本设计: 一.界面设计 1.标题 2.菜单栏 3.文本编辑区 4.滚动条 5.鼠标快右 ...

  7. 【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示

    本人前端烂,文章展示部分现在还弄的不好. 效果: 很想实现点击查看详情然后进入查看具体的文章内容,但还不知道怎么弄,有知道的兄弟可以教我一下. 首先npm下载: cnpm install vue-qu ...

  8. Day08-整合富文本编辑器-p115

    整合富文本编辑器-p115 一.Tinymce可视化编辑器 二.在项目中整合文本编辑器 2.1.下载组件 2.2.在项目中的build/webpack.dev.conf.js文件中添加配置 2.3.引 ...

  9. 项目一 国家电力项目思路总结

    Day01 项目框架(SSH) 1.项目介绍 2.项目框架(SSH) 第一步:创建数据库 第二步:创建项目(导入jar包SSH) 第三步:持久层 (1)在cn.itheima.domain中创建Ele ...

最新文章

  1. C指针3:指针变量的运算
  2. webApp移动开发之REM
  3. android开发多线程编程,Android多线程编程
  4. 重写equals所要遵守的约定
  5. WCF技术剖析之十一:异步操作在WCF中的应用(上篇)
  6. 中年失业都去做什么_2020年失业是种什么体验?这位吉他手去做了外卖小哥,演出时还穿着工作服...
  7. Log4Net 全方位跟踪程序运行
  8. Poisson方程五点差分格式例题及解答
  9. mysql8 设置了默认值 CURRENT_TIMESTAMP 依然报null问题
  10. JS:callee属性
  11. Mysql 主从复制简易操作指南
  12. PyTorch1.4安装(Anaconda3 + Python3.6 + cpu版本)
  13. linux5 iso镜像下载,Redhat Linux5.4/5.5/5.8/6.0/6.3 ISO镜像文件下载
  14. 假显卡测试软件,如何使用软件检测真假显卡软件验证方法简介
  15. 蓝桥杯2022年第十三届决赛真题-迷宫
  16. BZOJ---4484:[Jsoi2015]最小表示【bitset】
  17. vmware中linux启动项,VMWare虚拟机中安装Linux系统并启用
  18. 好奇那些进了大厂的程序员面试前都做了哪些准备?Android大厂面试官全套教程教你:这样准备面试顺利拿到offer
  19. 涉密计算机u盘管理,涉密U盘管理规定.doc
  20. 软件测试简历上的职业技能怎么写,测试工程师岗位个人简历个人技能范文

热门文章

  1. pythonfor循环输入_python的for循环
  2. eNSP检测不到网卡信息——WinPacp
  3. Python对json数据的操作(香烟示例)
  4. Part4:Citrix 3D 技术Step by Step配置指导手册
  5. android如何使用BroadcastReceiver后台实现来电通话记录的监听并存取到sqllite数据库通过Contentprovilder实现接口...
  6. SilverLight学习笔记--实际应用(一)(4):手把手建立一个Silverlight应用程序之同步数据校验1...
  7. 1087 有多少不同的值 (20分)
  8. python selenium 获取元素下的元素个数_Python + Selenium,分分钟搭建 Web 自动化框架!(送自动化测试书籍)...
  9. Python中字符串的连接
  10. java 一对多 数据结构_请教一下,java 有没有什么数据结构可以保存一对多的关系的??...