fastadmin 引用Summernote富文本编辑器，上传本地视频

第一步：修改summernote.js文件

1.在video方法里面增加 attachment: '上传视频文件'

2.callbacks方法中增加 onFileUpload: null

 3.在VideoDialog.prototype.showVideoDialog方法里增加以下代码

var $videoAttachment = _this.$dialog.find('.note-video-attachment');
var callbacks = _this.options.callbacks;

$videoAttachment.off('change');
$videoAttachment.on('change', function (event) {
    if (callbacks.onFileUpload) {
        console.log(event.target.files);
        _this.context.triggerEvent('file.upload', event.target.files);
    }
});

_this.bindEnterKey($videoAttachment,$videoBtn);

 4.在VideoDialog.prototype.initialize方法里增加页面按钮代码

'<div class="form-group note-form-group">',
"<label class=\"note-form-label\">" + this.lang.video.attachment + "</label>",
'<input class="note-video-attachment form-control note-form-control note-input" type="file" />',
'</div>',

以上js页面代码修改完成，效果图如下：

第二步：html+js

<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>

    <div class="col-xs-12 col-sm-8">
        <textarea id="summernote" class="form-control editor" name="content"></textarea>
    </div>
</div>

<script src="/assets/js/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link  type="text/css" href="/assets/addons/summernote/css/summernote.css" rel="stylesheet">
<script  type="text/javascript" src="/assets/addons/summernote/js/summernote.js"></script>
<script type="text/javascript"  src="/assets/addons/summernote/lang/summernote-zh-CN.min.js"></script>

<script type="text/javascript">
    //调用富文本编辑
    $(document).ready(function () {

        var $summernote = $('#summernote').summernote({
            width: '100%',
            height: 250,
            lang: 'zh-CN',
            focus: true,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr','video']],
                ['view', ['fullscreen', 'codeview']],
                ['help', ['help']]
            ],
            callbacks: {
                onImageUpload: function (files) {
                    console.log(files)
//                    sendFile(files,'#description');
                    sendFile($summernote, files[0]);

                },
                onFileUpload: function(files) {
                    //附件上传
                    sendVideoFile(files);
                },

            }

        });

        //ajax上传图片
        function sendFile($summernote, file) {
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "{:url('wiki/doc/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (data) {
                    // console.log(data);
                    $summernote.summernote('insertImage', data, function ($image) {
                        $image.attr('src', data);
                    });
                }
            });
        }

        // 上传视频文件
        function sendVideoFile(files) {
            var size = files[0].size;
            // if((size / 1024 / 1024) > 10) {
            //     alert("视频大小不能超过10M...");
            //     return false;
            // }
            var formData = new FormData();
            formData.append("file", files[0]);
            $.ajax({
                data : formData,
                type : "POST",
                url : "wiki/doc/upload_video",    // 图片上传出来的url，返回的是图片上传后的路径，http格式
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    console.log(data)
                    $(".note-video-url").val(data);
                    //去掉插入视频禁用按钮
                    $(".note-video-btn").removeAttr("disabled");
                },
                error:function(){
                    alert("视频上传失败");
                }
            });
        }
    });
</script>

第三步：PHP后端接口处理

public function upload_video()
{
    if ($_FILES) {
        if (!$_FILES['file']['error']) {
            /*截取后缀*/
            $suffix = substr($_FILES['file']['name'], strrpos($_FILES['file']['name'], '.'));
            $arr = array('.jpg', '.png', '.jpeg', '.gif', ".mp4");
            /*判断是否为图片*/

            if (in_array($suffix, $arr)) {
                //生成随机名
                $str = md5(rand(1000, 9999) . rand(1000, 9999) . time()) . $suffix;
                //上传文件到img文件
                $path = date('Ymd'); // 接收文件目录
                //判断有没有这个文件
                if (!file_exists('uploads/' . $path)) {
                    mkdir("uploads/$path", 0777, true);
                }
                $filename = "uploads/" . $path . '/' . $str;
                //临时文件移动到文件夹内
                move_uploaded_file($_FILES['file']['tmp_name'], $filename);
                $url = "/public/{$filename}";
                $file = file_get_contents($url);

                $videourl = Oss::ossUploadvideo($file, 'video');
                return $videourl;
            } else {
                return false;
            }

        }
    }

}

最后效果如下图：