外链收录网站,关于协会网站建设的建议,南昌公司做网站,网站源码程序修改版本#xff1a;KindEditor 4.x 官方文档#xff1a;http://kindeditor.net/doc.php 最近在公司实现一个功能#xff1a;
大概就是这样#xff1a; 富文本编辑器的上传图片、音频和视频的原理#xff0c;就是将这些文件上传至项目的静态文件中#xff0c;然后将相应文件…版本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 languagejava contentTypetext/html; charsetutf-8 pageEncodingutf-8%
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
% taglib prefixs urihttp://www.springframework.org/tags %
% taglib prefixform urihttp://www.springframework.org/tags/form %
% taglib prefixsg urihttp://www.sungness.com/tags %
s:url value/manage/groupinvited/groupinvitedcontroller/save varsaveURL/
form:form commandNamewechatGroupInvited idedit-form methodpost nameadminFormaction${saveURL} classform-validate form-horizontalfieldsetlegend${wechatGroupInvited.id ! null ? wechatGroupInvited.id : } 详细信息/legenddiv classcontrol-groupdiv classcontrol-labellabel idjform_pageName-lbl forjform_pageName classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.pageName,wechatGroupInvited.pageName.tip/s:message codewechatGroupInvited.pageName/span classstar */span/label/divdiv classcontrolsform:input pathpageName idjform_pageName classrequired size30requiredrequired aria-requiredtrue onlyreadtrue//div/divdiv classcontrol-groupdiv classcontrol-labellabel idjform_topImgUrl-lbl forjform_topImgUrl classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.topImgUrl,wechatGroupInvited.topImgUrl.tip/s:message codewechatGroupInvited.topImgUrl/span classstar */span/label/divdiv classcontrolsform:input pathtopImgUrl idjform_topImgUrl classrequired size30requiredrequired aria-requiredtrue value/a hrefjavascript:void(0) idupload上传图/a/div/divdiv classcontrol-groupdiv classcontrol-labellabel idjform_headImgUrl-lbl forjform_headImgUrl classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.headImgUrl,wechatGroupInvited.headImgUrl.tip/s:message codewechatGroupInvited.headImgUrl/span classstar */span/label/divdiv classcontrolsform:input pathheadImgUrl idjform_headImgUrl classrequired size30requiredrequired aria-requiredtrue value/a hrefjavascript:void(0) idupload_1上传头像/a/div/divdiv classcontrol-groupdiv classcontrol-labellabel idjform_voiceUrl-lbl forjform_voiceUrl classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.voiceUrl,wechatGroupInvited.voiceUrl.tip/s:message codewechatGroupInvited.voiceUrl/span classstar */span/label/divdiv classcontrolsform:input pathvoiceUrl idjform_voiceUrl classrequired size30requiredrequired aria-requiredtrue value/a hrefjavascript:void(0) idupload_2上传语音/a/div/divdiv classcontrol-groupdiv classcontrol-labellabel idjform_introduce-lbl forjform_introduce classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.introduce,wechatGroupInvited.introduce.tip/s:message codewechatGroupInvited.introduce/span classstar */span/label/divdiv classcontrolsform:textarea pathintroduce idjform_introduce stylewidth:800px;height:300px;visibility:hidden;/
!-- textarea stylewidth:800px;height:300px;visibility:hidden; nameintroduceStr --
!-- idjform_introduce /textarea --/div/divdiv classcontrol-groupdiv classcontrol-labellabel idjform_addGroupUrl-lbl forjform_addGroupUrl classhasTooltip requiredtitlesg:message codeTIP_TITLE refwechatGroupInvited.addGroupUrl,wechatGroupInvited.addGroupUrl.tip/s:message codewechatGroupInvited.addGroupUrl/span classstar */span/label/divdiv classcontrolsform:input pathaddGroupUrl idjform_addGroupUrl classrequired size30requiredrequired aria-requiredtrue onlyreadtrue//div/div/fieldsetinput typehidden nametask value /script typetext/javascriptKindEditor.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[nameintroduce],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、效果
