layui富⽂本编辑器layedit增加上传视频与⾳频功能
改动效果：
layui2.4.3并没有视频、⾳频等上传功能，不过还好，⽬前有⼀个基于layui2.4.3的layedit扩展，增加了视频上传、字体颜⾊等等。
⾸先去下载⼀个layedit扩展⽂件：
根据说明替换layedit.js，直接调⽤就会出现上⾯的效果，注意，编辑器中点击html会出错，那是因为少引⼊了⼀个ace,js，需要扩展⽂件中的Content/ace/ace.js，把Content⽂件夹粘贴到项⽬中layui⽬录下，然后在调⽤的界⾯引⼊ace.js即可。
...
<body>
<script src="/public/layui/layui.js"></script>
<script src="/public/layui/lay/modules/Content/ace/ace.js"></script>
<textarea id="demo" ></textarea>
<script type="text/javascript">
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('demo',{
tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
,
'|', 'fullScreen'
],
uploadImage: {
url: '/admin/base/upload'
},
uploadVideo: {
url: '/admin/base/upload',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb'
}
}); //建⽴编辑器
});
</script>
</body>
...
现在虽然有视频了，但是项⽬还缺少⾳频，去⽹上查了⼀下，有那么零星的⼏个⼈去改源码实现，虽然把代码贴了出来，但是不知版本还是怎么实在看不懂，代码完全对不上，没办法，只有⾃⼰动⼿了。
同样是改源码的思路，⾸先查看layedit.js中查看上传视频的代码，试想加⼊流程，发现有三处代码块的逻辑，如果新增⾳频，那么就只新增这三处的代码块。
按步骤应当是：
1、增加标签
搜索video查下⽅代码
增加⼀个audio标签
//注意，如果复制的video需要把标签中的内容去掉，i标签样式修改layui-icon-headset，否则会造成样式错乱audio: '<i class="layui-icon layui-icon-headset" title="插⼊⾳频" layedit-event="audio" ></i>'
2、增加config配置
搜索uploadVideo查下⽅代码：
增加代码：
uploadAudio: {
url: "",
accept: "audio",
acceptMime: "audio/*",
exts: "mp3|m4a|wma|amr|ape|flac|aac",
size: "20480"
},
3增加上传⾳频处理函数：
搜索video：查代码：
加⼊相同格式的函数:
audio: function(n) {
i.open({
type: 1,
id: "fly-jie-audio-upload",
title: "⾳频",
shade: !1,
area: "600px",
offset: "100px",
skin: "layui-layer-border",
content: ['<ul class="layui-form layui-form-pane" >', '<li class="layui-form-item">', '<button type="button" class="layui-btn" id="LayEdi t_InsertAudio"> <i class="layui-icon"> </i>上传⾳频</button>', '<input type="text" name="audio" placeholder="请选择⽂件" style="width: 79
%;position: relativ e;float: right;" class="layui-input">', "</li>", '<li class="layui-form-item" >', '<button type="button" lay-submit class="layui-btn layedit -btn-yes"> 确定 </button>', '<button type="button" class="layui-btn layui-btn-primary"> 取消 </button>', "</li>", "</ul>"].join(""),
success: function(l, o) {
layui.use("upload",
function(s) {
var r, c = l.find('input[name="audio"]'),
s = layui.upload,
f = a.uploadAudio || {};
elem: "#LayEdit_InsertAudio",
url: f.url,
accept: f.accept,
acceptMime: f.acceptMime,
exts: f.exts,
size: f.size,
before: function(t) {
r = i.msg("⽂件上传中，请稍等哦", {
icon: 16,
shade: .3,
shade: .3,
time: 0
})
},
done: function(t, e, n) {
if (i.close(r), 0 == t.code) t.data = t.data || {},
c.val(t.data.src);
else var a = i.open({
type: 1,
anim: 2,
icon: 5,
title: "提⽰",
area: ["390px", "260px"],
offset: "t",
content: t.msg + "<div><audio src='" + t.data.src + "' controls='controls'/></div>确定使⽤该⽂件吗？", btn: ["确定", "取消"],
yes: function() {
t.data = t.data || {},
c.val(t.data.src),
i.close(a)
},
btn2: function() {
i.close(a)
}
})
}
}),
l.find(".layui-btn-primary").on("click",
function() {
i.close(o)
}),
l.find(".layedit-btn-yes").on("click",
function() {
var a = y(n);
e(a).parent();
h.call(t, "p", {
text: ' <audio src="' + c.val() + '" controls="controls" >您的浏览器不⽀持audio播放</audio> ' },
n),
i.close(o)
})
})
layui下载}
})
},
到此步骤就算在layedit.js⽂件增加了⼀个上传⾳频处理的功能，接下来就是调⽤了
layedit.build('demo',{
tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt','audio', 'video', 'anchors'
, '|', 'fullScreen'
],
uploadImage: {
url: '/admin/base/upload'
},
uploadVideo: {
url: '/admin/base/upload',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb'
},
uploadAudio: {
url: '/admin/base/upload',
accept: 'audio',
acceptMime: 'audio/*',
exts: 'mp3|m4a|wma|amr|ape|flac|aac'
}
});
//这有⼀个提⽰语的问题，如果把uploadAudio参数中url下⽅的三个配置项注释掉，那么再选择除去⾳频之外的⽂件会报“选择的图⽚中包含不⽀持的格式”，这样的效果并不好，所以加上这三项等于把其他⽂件屏蔽掉了，这样⽤户只能选择⾳频⽂件。同理，视频也是如此。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论