Ckeditor與Ckfinder(java)整合實現富媒體內容編輯(支持文件上傳)

時間 2019-11-24

標籤 ckeditor ckfinder java 整合實現媒體內容編輯支持文件上傳欄目 Java 简体版

原文原文鏈接

先來看一下最終的效果圖javascript

1、編輯器界面html

2、上傳圖片界面java

jquery

1、安裝包下載，我使用的安裝包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip，這兩個文件能夠分別到
http://ckfinder.com/download和http://ckeditor.com/download下載，注意我使用的開發語言是java，因此下載cfinder的時候須要選擇的版本是ckfinder_java；web

2、在Eclipse中新建一個Dynamic Web Project項目，此處省略具體步驟；jsp

3、整合Ckeditor和Ckfinder；編輯器

　　一、解壓ckeditor_3.6.3.zip，而後將ckeditor文件夾所有考到WebContent根目錄下，修改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 = 400; //寬度    // config.height = 400; //高度     // config.skin = 'v2'; //編輯器皮膚樣式    // 取消 「拖拽以改變尺寸」功能     // config.resize_enabled = false;    // 使用基礎工具欄     
    // config.toolbar = "Basic";    
    // 使用全能工具欄      
    config.toolbar = "Full";     //使用自定義工具欄     // config.toolbar =    // [     // ['Source', 'Preview', '-'],     // ['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']    // ];    // 在 CKEditor 中集成 CKFinder，注ckfinder 的路徑選擇要正確。    
     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',    
     config.filebrowserWindowWidth = '1000',  
     config.filebrowserWindowHeight = '700'; };

　　二、解壓ckfinder_java_2.3.zip，將ckfinder目錄下的CKFinderJava.war解壓，找到ckfinder文件夾，將其拷貝到WebContent目錄下；在這一步中，simples目錄和plugins/gallery/jquery.min.js會提示出錯，將simples目錄直接刪除便可，下載最新的jquery.min.js文件替換原有的jquery.min.js文件，將不會再有錯誤提示；ui

　　三、整合jar包，把上一步中解壓的war包中的jar文件拷貝到咱們本身的工程中，其位置一般是：ckfinder\CKFinderJava\WEB-INF\lib；將這個目錄下面的jar文件拷貝到咱們的工程中的lib文件夾下，接着把config.xml和web.xml文件也拷貝到咱們本身的工程中的相應位置(WebContent/WEB-INF)；spa

　　打開config.xml，第二行的<enabled>false</enabled>換成：<enabled>true</enabled> ；第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>換成<baseURL>/CK/userfiles/</baseURL>注意：此處的CK是根據項目名定的。

4、在WebContent目錄下新建一個editor.jsp文件；

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript">
    function GetContents() {
        var oEditor = CKEDITOR.instances.editor1;

        alert(oEditor.getData());
    }
</script>

<title>編輯產品信息</title>
</head>
<body>
    <textarea id="editor1" name="editor1" class="ckeditor" rows="20"
        cols="80">&nbsp;</textarea>
    <input onclick="GetContents();" type="button"
        value="Get Editor Contents (XHTML)" />
</body>
</html>