JavaScript|JavaScript 使用Ckeditor+Ckfinder文件上传案例详解
目录
- 一、准备工作
- 二、解压
- 三、开始集成
一、准备工作 Ckeditor_4.5.7_full + Ckfinder_java_2.6.0
二、解压 1.解压ckeditor,和平常文件解压相同,正常解压即可
文章图片
2.解压ckfinder,解压完成后进入ckfinder文件夹下,发现有CKFinderJava-2.6.0.war文件,继续解压。
文章图片
3.注意看红框部分
文章图片
三、开始集成 1.准备工作完成,将图1中的ckeditor,及图3中的ckfinder文件夹拷贝到我们自己的项目的WebContent下。我在WebContent下新建了文件夹assets。
文章图片
2.新建jsp页面
ckeditor - 锐客网 ${base }${msg }
此时我们已经可以看到富文本编辑器。
3.进入如图所示目录下,将config.xml复制到我们自己项目的WEB-INF下,我将文件更名为ckfinder.xml,并将lib下的jar包导入。
文章图片
4.修改ckfinder.xml
文章图片
basedir 为文件存储的物理路径,就是我们项目在自己的电脑上运行时,找到项目运行路径,然后自己想要保存的位置。(表述不清楚可以私信~)
5.修改ckeditor下的config.js文件
CKEDITOR.editorConfig = function( config ) {config.height = 300; config.enterMode = CKEDITOR.ENTER_BR; // 去掉config.shiftEnterMode = CKEDITOR.ENTER_BR; // 去掉config.toolbarCanCollapse = true; //工具栏可折叠config.toolbarGroups = [{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },{ name: 'forms', groups: [ 'forms' ] },{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },{ name: 'insert', groups: [ 'insert' ] },'/',{ name: 'styles', groups: [ 'styles' ] },{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },{ name: 'colors', groups: [ 'colors' ] },{ name: 'others', groups: [ 'others' ] },{ name: 'links', groups: [ 'links' ] },{ name: 'about', groups: [ 'about' ] },{ name: 'tools', groups: [ 'tools' ] }]; config.removeButtons = 'About,Flash,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,NewPage,Templates,Scayt,Language,Smiley,Iframe,Save,SelectAll,CreateDiv,BidiRtl,BidiLtr,ShowBlocks'; var p='/Ckeditor/assets/'; config.filebrowserBrowseUrl =p+'ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = p+'ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl = p+'ckfinder/ckfinder.html?type=Flash'; config.filebrowserUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; };
6.在web.xml中添加如下代码
ConnectorServletcom.ckfinder.connector.ConnectorServletPath to configuration file can be relative path inside application,absolute path on local file system or UNC path. XMLConfig/WEB-INF/ckfinder.xmldebugfalse 1 ConnectorServlet/assets/ckfinder/core/connector/java/connector.java
7.运行查看效果。
【JavaScript|JavaScript 使用Ckeditor+Ckfinder文件上传案例详解】到此这篇关于JavaScript 使用Ckeditor+Ckfinder文件上传案例详解的文章就介绍到这了,更多相关JavaScript 使用Ckeditor+Ckfinder文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 事件代理
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- 数组常用方法一