layui富文本编辑器layedit增加上传视频与音频功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38529889/article/details/84337266

改动效果：
在这里插入图片描述

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" style="display: none;"></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" style="font-size:18px"></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" style="margin: 20px;">', '<li class="layui-form-item">', '<button type="button" class="layui-btn" id="LayEdit_InsertAudio"> <i class="layui-icon"></i>上传音频</button>', '<input type="text" name="audio" placeholder="请选择文件" style="width: 79%;position: relative;float: right;" class="layui-input">', "</li>",  '<li class="layui-form-item" style="text-align: center;">', '<button type="button" lay-submit  class="layui-btn layedit-btn-yes"> 确定 </button>', '<button style="margin-left: 20px;" 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 || {};
						s.render({
							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,
									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: '&nbsp;<audio src="' + c.val() + '" controls="controls" >您的浏览器不支持audio播放</audio>&nbsp;'
							},
							n),
							i.close(o)
						})
					})
				}
			})
	},

到此步骤就算在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下方的三个配置项注释掉，那么再选择除去音频之外的文件会报“选择的图片中包含不支持的格式”，这样的效果并不好，所以加上这三项等于把其他文件屏蔽掉了，这样用户只能选择音频文件。同理，视频也是如此。