富文本編輯器的使用(補充)

Kindeditor的圖片上傳和圖片管理
引入先關文件

<!--引入kindeditor相關js,css-->
        <script type="text/javascript" src="../../edit/kindeditor.js" ></script>
        <link rel="stylesheet" href="../../edit/themes/default/default.css" />
        <script type="text/javascript" src="../../edit/lang/zh_CN.js" ></script>

系統提供的默認實現
1.在頁面設置kindeditor的屬性,指定使用默認的JSP實現
這裏寫圖片描述

  1. uploadJson : ‘../../editor/jsp/upload_json.jsp’,
    必須配置:指定上傳文件程序的位置。
  2. allowFileManager:true,
    可選,如果使用圖片管理器,進行設置
  3. fileManagerJson : ‘../../editor/jsp/file_manager_json.jsp’
    設置圖片管理器的實現程序

2.將下載的kindeditor的有關JSP的默認實現複製到項目中
01 安裝文件\kindeditor\jsp 路徑下
這裏寫圖片描述
Lib: 當前上傳文件依賴的jar
json_simple-1.1.jar 是kindeditor自己設置的一個JSON轉換包,必須導入
a)maven:
這裏寫圖片描述

執行命令之前,需要配置maven_home,path。
到當前jar包所在的路徑下,執行:

mvn install:install-file -Dfile=json_simple-1.1.jar -DgroupId=com.kindeditor.json -DartifactId=kindeditor -Dversion=1.0 -Dpackaging=jar

b)將jar包複製到 WEB-INF/lib文件夾下
3.將剩下的JSP文件複製到editor目錄下

  1. upload_json.jsp JSP版的文件上傳
  2. file_manager_json.jsp JSP版的文件管理器

4.文件上傳的說明,
默認情況下,官方自帶的程序,將上傳的圖片按照日期保存在attached文件夾下
應該在項目中,手動創建該文件夾。
這裏寫圖片描述

5.運行程序的tomcat插件必須是tomcat7

        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.1</version>
            <configuration>
                    <port>9001</port>
            </configuration>
        </plugin>

6.如果使用的是struts,要在web.xml中,將struts的攔截器配置爲:*.action
7.使用代碼

$(function(){
        $("body").css({visibility:"visible"});
        $("#back").click(function(){
            location.href = "promotion.html";
        });
        //初始化kindeditor編輯器
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('#description', {
                items : [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about'
                    ],
                    uploadJson : '../../edit/jsp/upload_json.jsp',
                    fileManagerJson : '../../edit/jsp/file_manager_json.jsp',
                    allowFileManager : true
                   });
          });
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章