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