关于kindeditor富文本编辑的上传图片、音频、和视频的使用

版本：KindEditor 4.x 

官方文档：http://kindeditor.net/doc.php

最近在公司实现一个功能：

大概就是这样：

富文本编辑器的上传图片、音频和视频的原理，就是将这些文件上传至项目的静态文件中，然后将相应文件的存储路径保存至数据库里面。

我是用的是富文本编辑器中默认的jsp文件upload_json.jsp和file_manager_json.jsp。

upload_json.jsp：文件上传时，辨别文件类型，生成文件存放目录以及重命名文件等等

file_manager_json.jsp：和浏览文件有关

1、首先将kindeditor放在相应的js下面：

2、修改upload_json.jsp和file_manager_json.jsp中有关文件的目录：

upload_json.jsp:(有关文件保存路径和文件上传大小，以及下面有关文件类型验证等等)

file_manager_json.jsp：

3、在相应jsp文件中添加此插件：

首先需要引进插件，然后在相应的js中添加js代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sg" uri="http://www.sungness.com/tags" %>
<s:url value="/manage/groupinvited/groupinvitedcontroller/save" var="saveURL"/>
<form:form commandName="wechatGroupInvited" id="edit-form" method="post" name="adminForm"
           action="${saveURL}" class="form-validate form-horizontal">
    <fieldset>
        <legend>${wechatGroupInvited.id != null ? wechatGroupInvited.id  : ""} 详细信息</legend>
        <div class="control-group">
            <div class="control-label">
                <label id="jform_pageName-lbl" for="jform_pageName" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.pageName,wechatGroupInvited.pageName.tip"/>">
                    <s:message code="wechatGroupInvited.pageName"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:input path="pageName" id="jform_pageName" class="required" size="30"
                            required="required" aria-required="true" onlyread="true"/>
            </div>
        </div>
		<div class="control-group">
            <div class="control-label">
                <label id="jform_topImgUrl-lbl" for="jform_topImgUrl" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.topImgUrl,wechatGroupInvited.topImgUrl.tip"/>">
                    <s:message code="wechatGroupInvited.topImgUrl"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:input path="topImgUrl" id="jform_topImgUrl" class="required" size="30"
                            required="required" aria-required="true" value=""/>
				<a href="javascript:void(0)" id="upload">上传图</a>
            </div>
        </div>
        <div class="control-group">
            <div class="control-label">
                <label id="jform_headImgUrl-lbl" for="jform_headImgUrl" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.headImgUrl,wechatGroupInvited.headImgUrl.tip"/>">
                    <s:message code="wechatGroupInvited.headImgUrl"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:input path="headImgUrl" id="jform_headImgUrl" class="required" size="30"
                            required="required" aria-required="true" value=""/>
				<a href="javascript:void(0)" id="upload_1">上传头像</a>
            </div>
        </div>
        <div class="control-group">
            <div class="control-label">
                <label id="jform_voiceUrl-lbl" for="jform_voiceUrl" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.voiceUrl,wechatGroupInvited.voiceUrl.tip"/>">
                    <s:message code="wechatGroupInvited.voiceUrl"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:input path="voiceUrl" id="jform_voiceUrl" class="required" size="30"
                            required="required" aria-required="true" value=""/>
				<a href="javascript:void(0)" id="upload_2">上传语音</a>
            </div>
        </div>
       	<div class="control-group">
            <div class="control-label">
                <label id="jform_introduce-lbl" for="jform_introduce" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.introduce,wechatGroupInvited.introduce.tip"/>">
                    <s:message code="wechatGroupInvited.introduce"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:textarea path="introduce" id="jform_introduce" style="width:800px;height:300px;visibility:hidden;"/>
<!--                 <textarea style="width:800px;height:300px;visibility:hidden;" name="introduceStr" -->
<!--                 			id="jform_introduce" ></textarea> -->
            </div>
        </div>
        <div class="control-group">
            <div class="control-label">
                <label id="jform_addGroupUrl-lbl" for="jform_addGroupUrl" class="hasTooltip required"
                       title="<sg:message code="TIP_TITLE" ref="wechatGroupInvited.addGroupUrl,wechatGroupInvited.addGroupUrl.tip"/>">
                    <s:message code="wechatGroupInvited.addGroupUrl"/><span class="star"> *</span></label>
            </div>
            <div class="controls">
                <form:input path="addGroupUrl" id="jform_addGroupUrl" class="required" size="30"
                            required="required" aria-required="true" onlyread="true"/>
            </div>
        </div>
    </fieldset>
    <input type="hidden" name="task" value="" />
    <script type="text/javascript">
 
KindEditor.ready(function(K) {
	var editor = K.editor({
		cssPath : '/js/kindeditor-4.1.10/plugins/code/prettify.css',
		uploadJson : '/js/kindeditor-4.1.10/jsp/upload_json.jsp',
		fileManagerJson : '/js/kindeditor-4.1.10/jsp/file_manager_json.jsp',
		allowFileManager : true,
		allowFileManager : true
	});
K('#upload').click(function() {
	editor.loadPlugin('image', function() {
		editor.plugin.imageDialog({
			showRemote : false,
			imageUrl : K('#jform_topImgUrl-lbl').val(),
			clickFn : function(url, title, width, height, border, align) {
				K('#jform_topImgUrl').val(url);
				editor.hideDialog();
			}
		});
	});
});
K('#upload_1').click(function() {
	editor.loadPlugin('image', function() {
		editor.plugin.imageDialog({
			showRemote : false,
			imageUrl : K('#jform_headImgUrl-lbl').val(),
			clickFn : function(url, title, width, height, border, align) {
				K('#jform_headImgUrl').val(url);
				editor.hideDialog();
			}
		});
	});
});
K('#upload_2').click(function() {
	editor.loadPlugin('media', function() {
		editor.plugin.imageDialog({
			showRemote : false,
			imageUrl : K('#jform_voiceUrl-lbl').val(),
			clickFn : function(url, title, width, height, border, align) {
				K('#jform_voiceUrl').val(url);
				editor.hideDialog();
			}
		});
	});
});
// 关闭过滤模式，保留所有标签
//KindEditor.options.filterMode = false;
// window.editor = K.create('#jform_introduce');
var options = {
		cssPath : '/js/kindeditor-4.1.10/plugins/code/prettify.css',
		uploadJson : '/js/kindeditor-4.1.10/jsp/upload_json.jsp',
		fileManagerJson : '/js/kindeditor-4.1.10/jsp/file_manager_json.jsp',
		allowFileManager : true,
		allowFileManager : true
};
var editor = K.create('textarea[name="introduce"]',options);
// 取得HTML内容
html = editor.html();
 
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('jform_introduce').value; // 原生API
html = K('#jform_introduce').val(); // KindEditor Node API
html = $('#jform_introduce').val(); // jQuery
 
// 设置HTML内容
editor.html('');
 
});
    </script>
</form:form>

4、效果：