1、思路:上传后把上传后的得到的地址追加到富文本。
(注:我是用的是laui,原生js同理)
效果图:
2、具体代码:
div代码部分
<!-- 富文本内容区 -->
<div class="layui-form-item security_edit_form_param_content">
<label class="layui-form-label">内容</label>
<div class="layui-btn-container">
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频 -- (请等待下面富文本器加载完毕再上传视频)</button>
</div>
<div class="layui-input-block">
<textarea id="edit"></textarea>
</div>
</div>
js部分
//定义layui的用到的插件
var $ = layui.jquery
,layer = parent.layer === undefined ? layui.layer : top.layer
,form = layui.form;
var upload = layui.upload,element = layui.element;
上传视频部分代码:
//视频上传
upload.render({
elem: '#test5'
,url: '' //改成您自己的上传接口
,accept: 'video' //视频
,done: function(res){
layer.msg('上传成功');
console.log(res.data.src);//你返回的js
//注意以下的一段html里面需要替换两个地方,替换为你后台返回的视频url
var vhtml = '<p><span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-controls="controls" data-mce-html="<source src='+res.data.src+' />"><video src="'+res.data.src+'" controls="controls" width="100%" height="auto" frameborder="0"></video><span class="mce-shim"></span></span></p>';
//追加到内容
content = content + vhtml;
//赋值给内容
edit.setContent(content);
}
});
tinymce编辑器部分代码
//编辑器
var content = "";
var edit = "";
layui.extend({
tinymce: './tinymce/tinymce'//你的富文本组件路径
}).use(['tinymce'], function () {
var t = layui.tinymce;
t.render({
elem: "#edit",
height: 600,//高度自己定义
images_upload_handler: function (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '');//你后台上传图片的接口,这个地方是富文本里面的图片上传,看自己需求
//进度条
xhr.upload.onprogress = function(e){
progress(e.loaded / e.total * 100);
}
xhr.onload = function() {
var json;
if (xhr.status == 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300 ) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
}
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
},(opt, d)=>{
// 加载完成后回调 opt 是传入的所有参数
// edit是当前编辑器实例,等同于t.get返回值
edit = d;
d.setContent(content);
});
//edit = t.get('#edit');
})