昆明seo网站移动版网站建设

版本：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、效果：