wangEditor富文本编辑器的调用开发实录(v5版本、多个编辑器、php后端上传视频阿里云OSS、编辑HTML回显)

wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)

wangEditor富文本编辑器的调用开发实录

一、多个编辑器
- 1.构建HTML容器
- 2.创建编辑器和工具栏
二、编辑内容时编辑器回显HTML
- 1.创建textarea隐藏表单，用于储存从数据库读取过来的HTML数据，而不是直接将HTML置入js代码中
- 2.js获取HTML数据
三、上传视频阿里云OSS
- 1.配置上传图片和视频菜单
- 2.配置后端视频处理模式

一、多个编辑器

1.构建HTML容器

<div class="layui-form-item">
                    <label for="editor-toolbar-1" class="layui-form-label">主观资料 <span class="x-red">* </span></label>
                    <div class="layui-input-block">
                        <div class="editor-border">
                            <div id="editor-toolbar-1"><!-- 工具栏 --></div>
                            <div id="editor-text-area-1" class="editor-height"><!-- 编辑器 --></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="editor-toolbar-1" class="layui-form-label">客观资料 <span class="x-red">* </span></label>
                    <div class="layui-input-block">
                        <div class="editor-border">
                            <div id="editor-toolbar-2"><!-- 工具栏 --></div>
                            <div id="editor-text-area-2" class="editor-height"><!-- 编辑器 --></div>
                        </div>
                    </div>
                </div>

2.创建编辑器和工具栏

 const E = window.wangEditor
    //主观资料
    const editor1 = E.createEditor({
        selector: '#editor-text-area-1',
        config: {
            placeholder: '<p><strong>二、主观性资料S</strong><br>包括患者的主诉、现病史、既往史、个人史、家族史等。（可粘贴图片，或上传视频）</p>',
            autoFocus: false,
            onChange(editor) {
                //document.getElementById('content-view-1').innerHTML = editor.getHtml()
            }
        },
        html: ''
    })
    const toolbar1 = E.createToolbar({
        editor: editor1,
        selector: '#editor-toolbar-1',
        config: {},
        mode: 'default'
    })

    //客观资料
    const editor2 = E.createEditor({
        selector: '#editor-text-area-2',
        config: {
            placeholder: '<p><strong>三、客观性资料0</strong><br>包括患者的体格检查、实验室检查、影像学检查等。（可粘贴图片，或上传视频）</p>',
            autoFocus: false,
            onChange(editor) {
                //document.getElementById('content-view-1').innerHTML = editor.getHtml()
            }
        },
        html: ''
    })
    const toolbar2 = E.createToolbar({
        editor: editor2,
        selector: '#editor-toolbar-2',
        config: {},
        mode: 'default'
    })

二、编辑内容时编辑器回显HTML

1.创建textarea隐藏表单，用于储存从数据库读取过来的HTML数据，而不是直接将HTML置入js代码中

 <div class="layui-form-item">
                    <label for="editor-toolbar-1" class="layui-form-label">主观资料 <span class="x-red">* </span></label>
                    <div class="layui-input-block">
                        <div class="editor-border">
                            <div id="editor-toolbar-1"><!-- 工具栏 --></div>
                            <div id="editor-text-area-1" class="editor-height"><!-- 编辑器 --></div>
                        </div>
                        <textarea name="forum_subjective" id="forum_subjective" style="display: none;"><p><strong>二、主观性资料S</strong><br>包括患者的主诉、现病史、既往史、个人史、家族史等。（可粘贴图片，或上传视频）</p></textarea>
                    </div>
                </div>

2.js获取HTML数据

使用

onCreated(editor) {
                editor.setHtml(forum_subjective)
            }

回显数据。

    var forum_subjective = $("#forum_subjective").val();
      //主观资料
    const editor1 = E.createEditor({
        selector: '#editor-text-area-1',
        config: {
            placeholder: 'Type here...',
            autoFocus: false,
            onCreated(editor) {
                editor.setHtml(forum_subjective)
            },
            onChange(editor) {
                //document.getElementById('content-view-1').innerHTML = editor.getHtml()
            }
        },
        html: ''
    })

三、上传视频阿里云OSS

1.配置上传图片和视频菜单

 const editor1 = E.createEditor({
        selector: '#editor-text-area-1',
        config: {
            placeholder: 'Type here...',
            autoFocus: false,
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',//后台获取文件方式;
                    server: '?m=Upload&a=uploadDeal&act=wangEditor&fromType=forum&token=' + token,
                    maxFileSize: 1 * 1024 * 1024, // 1M
                    allowedFileTypes: ['image/*'],
                    onFailed(file, res) {
                        layer.msg(res.message);
                    },
                    onError(file, err, res) {
                        layer.msg(file.name + err);
                    }
                },
                uploadVideo: {
                    fieldName: 'file',//后台获取文件方式;
                    server: '?m=Upload&a=uploadDeal&act=wangVideo&fromType=forum&token=' + token,
                    maxFileSize: 100 * 1024 * 1024, // 100M
                    maxNumberOfFiles: 1,
                    allowedFileTypes: ['video/*'],
                    timeout: 300 * 1000, // 过期时间，单位:秒
                    onBeforeUpload(file) {
                        layer.msg('视频文件较大时，上传后耐心等待视频回显。');
                    },
                    onSuccess(file, res) {
                        layer.msg(`${file.name}`+ res.message)
                    },
                    onFailed(file, res) {
                        layer.msg(res.message +'-'+ res);
                    },
                    onError(file, err, res) {
                        layer.msg(file.name + err + res);
                    }
                }
            },
           onCreated(editor) {
                editor.setHtml(forum_subjective)
            },
            onChange(editor) {
                //document.getElementById('content-view-1').innerHTML = editor.getHtml()
            }
        },
        html: ''
    })
    const toolbar1 = E.createToolbar({
        editor: editor1,
        selector: '#editor-toolbar-1',
        config: {},
        mode: 'default'
    })

2.配置后端视频处理模式

 /*上传视频*/
    case "wangVideo";
        $fromType = get_param('fromType');
        $token = get_param('token');
        $user_id = AuthCode($_COOKIE["db_user_id"], "DECODE", "LOCKDATAV", "") . "_user";

        //上传信息;
        $file = $_FILES['file'];
        $uploaded_type = $file['type'];
        $uploaded_tmp = $file['tmp_name'];
        $uploaded_ext = substr($file['name'], strrpos($file['name'], '.') + 1);
        $fileName = $user_id . "_" . md5(time()) . "." . $uploaded_ext;

        //01.获取验证token
        if ($token != $_SESSION['upToken'] || $token == "") {
            $res['errno'] = 1;
            $res['message'] = "非法传参页面，请刷新重新上传" . $token;
            session_destroy(); //验证码自动销毁;
            die(json_encode_lockdata($res));
        }

        //04.判断文件大小1M
        if ($file["size"] > 100 * 1024 * 1024) {
            $res['code'] = 1;
            $res['message'] = "文件大小不能超过100M";
            die(json_encode_lockdata($res));
        }

        //05-执行上传;
        //阿里云OSS
        if ($CONF['uploadType'] == 1) {
            $accessKeyId = $CONF['accessKeyId'];
            $accessKeySecret = $CONF['accessKeySecret'];
            $endpoint = $CONF['endpoint'];
            $bucket = $CONF['bucket'];
            $object = "tslf/" . $fileName;//目标上传路径,Object完整路径中不能包含Bucket名称
            $filePath = $uploaded_tmp;//"upload/1.mp4";//指定本地路径
            try {
                $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
                $row = $ossClient->uploadFile($bucket, $object, $filePath);
                //返回JSON；
                $res['errno'] = 0;
                $res['data']['url'] = $row['info']['url'];//视频地址
                $res['data']['poster'] = "";//封面图片
                $res['message'] = '上传成功!';
                die(json_encode_lockdata($res));
            } catch (OssException $e) {
                $res['errno'] = 1;
                $res['message'] = $e->getMessage();
                die(json_encode_lockdata($res));
            }
        }

        //本地服务器
        if ($CONF['uploadType'] == 0) {
            //创建目录;
            $upload_dir = 'upload';
            $imgUrl = $upload_dir . '/' . $fromType;
            if (!is_dir($upload_dir)) {
                mkdir($upload_dir);
            }

            if (!is_dir($imgUrl)) {
                mkdir($imgUrl);
            }

            move_uploaded_file($file['tmp_name'], $imgUrl . "/" . $fileName);
            $safe_img = $imgUrl . "/" . $fileName;

            //返回JSON；
            $res['errno'] = 0;
            $res['data']['url'] = $CONF['url'] . $safe_img;//视频地址
            $res['data']['poster'] = "";//封面图片
            $res['message'] = '上传成功!';
            die(json_encode_lockdata($res));
        }

        break;