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頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path; %> <c:set var="base" value="<%=basePath%>"></c:set> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入ckeditor.js和ckfinder.js --> <script type="text/javascript" src="${base%20}/assets/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="${base%20}/assets/ckfinder/ckfinder.js"></script> <title>ckeditor</title> </head> <body> ${base } <p> <h1>${msg }</h1> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea> </form> <!-- 將id為editor1的textarea用ckeditor來操作 --> <script type="text/javascript"> var editor = CKEDITOR.replace( 'editor1' ); CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/'); </script> </body> </html>
此時我們已經可以看到富文本編輯器。
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;// 去掉<p> config.shiftEnterMode = CKEDITOR.ENTER_BR;// 去掉<p> 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中添加如下代碼
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <description> Path to configuration file can be relative path inside application, absolute path on local file system or UNC path. </description> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/ckfinder.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文件夾即可--> /assets/ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping>
7.運行查看效果。
到此這篇關於JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解的文章就介紹到這瞭,更多相關JavaScript 使用Ckeditor+Ckfinder文件上傳內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- asp.net core集成CKEditor實現圖片上傳功能的示例代碼
- 解決tomcat 靜態頁面(html)中文亂碼的解決終極篇
- Vue一個動態添加background-image的實現
- JSscript標簽有哪些屬性
- vue集成一個支持圖片縮放拖拽的富文本編輯器