Kindeditor-4.1.10使用

Posted 2022-06-15 鬼王呵

Kindeditor-4.1.10使用

kindeditor-4.1.10下载地址

kindeditor-4.1.10

kindeditor-4.1.10在JavaWeb工程中使用

kindeditor-4.1.10放到自己工程的目录下，一般位于WebRoot目录下面。开始kindeditor-4.1.10放入WebRoot中时，kindeditor-4.1.10文件下的有些文件时报错的，但是我们不能修改其中的报错的内容，在Eclipse应用程序中可以就报错的文件右击，选择Eclipse，在选择Exclude from Validation即可。

因为是JavaWeb工程，上传图片时注意点：

• 需要引入相关的3个jar包：
  
  • commons-fileupload.jar： 文件上传
  • commons-io.jar：流操作
  • json_simple.jar：json数据转换
• 需要修改kindeditor-4.1.10/jsp/upload_json.jsp文件

// 在upload_json.jsp文件的头部添加（如果没有）
<%@ page import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper" %>

//文件保存目录路径(Tomcat) 把最后的xx改为upload
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";

//文件保存目录URL（工程下）
String saveUrl  = request.getContextPath() + "/upload/";

• 在发布的服务器中的对应的工程中创建与上述修改为upload的同名的文件夹，这个可以在相应的程序中通过代码实现，即upload文件夹；同时在工程中相应的位置创建upload文件夹
• 在对应的JSP页面，添加下面的代码：

// 引入css/js
<link rel="stylesheet" href="$pageContext.request.contextPath/kindeditor-4.1.10/themes/default/default.css" />

    <script type="text/javascript" charset="utf-8" src="$pageContext.request.contextPath/kindeditor-4.1.10/kindeditor-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="$pageContext.request.contextPath/kindeditor-4.1.10/lang/zh_CN.js"></script>

// 编辑器在哪里起作用，同时控制图片等上传
<script type="text/javascript" >
        var editor;
        KindEditor.ready(function(K) 
            editor = K.create('textarea[name="content"]', 

                uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',
                fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',
                allowFileManager : true,
                allowImageUpload : true, 
                autoHeightMode : true,

                afterCreate : function() this.loadPlugin('autoheight');,

                afterBlur : function() this.sync();   //Kindeditor下获取文本框信息
            );
        );
    </script>

kingeditor-4.1.10控件的增加、删除、修改等，有时间还需要研究。
上传图片时把远程上传去除，都没有起到作用，郁闷！
- 方案一：把kindeditor-4.1.10/plugins/images.js文件的showRemote = K.undef(options.showRemote, true),修改为showRemote = K.undef(options.showRemote, false),
- 方案二：把kindeditor-4.1.10/plugins/images.js文件的的下述代码注释或者删除

            //remote image - start
            '<div class="tab1" style="display:none;">',
            //url
            '<div class="ke-dialog-row">',
            '<label for="remoteUrl" style="width:60px;">' + lang.remoteUrl + '</label>',
            '<input type="text" id="remoteUrl" class="ke-input-text" name="url" value="" style="width:200px;" /> &nbsp;',
            '<span class="ke-button-common ke-button-outer">',
            '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
            '</span>',
            '</div>',
            //size
            '<div class="ke-dialog-row">',
            '<label for="remoteWidth" style="width:60px;">' + lang.size + '</label>',
            lang.width + ' <input type="text" id="remoteWidth" class="ke-input-text ke-input-number" name="width" value="" maxlength="4" /> ',
            lang.height + ' <input type="text" class="ke-input-text ke-input-number" name="height" value="" maxlength="4" /> ',
            '<img class="ke-refresh-btn" src="' + imgPath + 'refresh.png" width="16" height="16" alt="" style="cursor:pointer;" title="' + lang.resetSize + '" />',
            '</div>',
            //align
            '<div class="ke-dialog-row">',
            '<label style="width:60px;">' + lang.align + '</label>',
            '<input type="radio" name="align" class="ke-inline-block" value="" checked="checked" /> <img name="defaultImg" src="' + imgPath + 'align_top.gif" width="23" height="25" alt="" />',
            ' <input type="radio" name="align" class="ke-inline-block" value="left" /> <img name="leftImg" src="' + imgPath + 'align_left.gif" width="23" height="25" alt="" />',
            ' <input type="radio" name="align" class="ke-inline-block" value="right" /> <img name="rightImg" src="' + imgPath + 'align_right.gif" width="23" height="25" alt="" />',
            '</div>',
            //title
            '<div class="ke-dialog-row">',
            '<label for="remoteTitle" style="width:60px;">' + lang.imgTitle + '</label>',
            '<input type="text" id="remoteTitle" class="ke-input-text" name="title" value="" style="width:200px;" />',
            '</div>',
            '</div>',
            //remote image - end

对kindeditor的控件还需研究

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系