官方地址 [https://eleditor.fixel.cn/demo.html](https://eleditor.fixel.cn/demo.html) 上传视频 ``` <script src="/public/Eleditor/Eleditor.min.js"></script> <style> #contentEditor{ width: 100%; min-height: 300px; box-sizing: border-box; padding: 10px; color: #444; } #contentEditor p{ letter-spacing: 0.25px; font: 16px/25px Tahoma, Verdana, 宋体; margin: 20px 0px; } #contentEditor h4 { font-weight: bold; line-height: 1.333em; margin: 10px 0 20px; padding: 25px 0 0; } #contentEditor img{ width: 100%; height: auto; box-sizing: border-box; } .dempTip{ border-left: 2px solid #00BCD4; padding-left: 5px; margin: 10px; font-size: 16px; } code{ white-space: pre-wrap; background: #2D2D2D; display: block; margin: 10px; border-radius: 5px; color: #fff; } .viewTit{ color: #FF5722; position: fixed; top: 0; left: 0; height: 30px; line-height: 30px; font-size: 14px; text-align: center; display: block; width: 100%; background: #FFEB3B; box-shadow: 0 0 5px; } #contentEditor{word-break:break-all;} </style> <div class="editorbox"> <div id="contentEditor"></div> </div> <script> var contentEditor = new Eleditor({ el: '#contentEditor', upload:{ server: "/members/travel/update.html", formName: 'upload', fileSizeLimit :'20', accept: { mimeTypes: 'image/*' }, }, /*初始化完成钩子*/ mounted: function(){ /*以下是扩展插入视频的演示*/ var _videoUploader = WebUploader.create({ auto: true, server: "/members/travel/update_video.html", /*按钮类就是[Eleditor-你的自定义按钮id]*/ pick: $('.Eleditor-insertVideo'), duplicate: true, resize: false, accept: { title: 'Images', extensions: 'mp4', mimeTypes: 'video/mp4' }, fileVal: 'video', }); _videoUploader.on( 'uploadStart', function() { layer.msg('上传中...', { icon: 16, shade: 0.5, time: 0 }); }); _videoUploader.on( 'error', function() { window.alert('上传失败：'+arguments[0]); layer.closeAll(); }); _videoUploader.on( 'uploadSuccess', function( _file, _call ) { layer.closeAll(); if( _call.status == 0 ){ return window.alert(_call.msg); } /*保存状态，以便撤销*/ contentEditor.saveState(); contentEditor.getEditNode().after(` <div class='Eleditor-video-area'> <video src="${_call.url}" controls="controls"></video> </div> `); contentEditor.hideEditorControllerLayer(); }); }, changer: function(){ console.log('文档修改'); }, /*自定义按钮的例子*/ toolbars: [ 'insertText', 'editText', 'insertImage', 'insertLink', 'insertHr', 'delete', //自定义一个视频按钮 { id: 'insertVideo', // tag: 'p,img', //指定P标签操作，可不填 name: '插入视频', handle: function(select, controll){ //回调返回选择的dom对象和控制按钮对象 /*因为上传要提前绑定按钮到webuploader，所以这里不做上传逻辑，写在mounted*/ /*!!!!!!返回false编辑面板不会关掉*/ return false; } }, 'undo', 'cancel' ] //placeHolder: 'placeHolder设置占位符' }); </script> ```