wangeditor 回显内容,上传图片,上传视频等

wangeditor 回显内容

<div class="layui-container" style="margin-top: 1rem">
  <form class="layui-form" action="" lay-filter="example">

    <input type="hidden" name="id" value="{$f.id}">

    <div class="layui-form-item layui-form-text">
      <div id="editor—wrapper" style="margin-bottom: 20rem">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
        <input type="hidden" value="{$f.content}" id="h-dom">
        <textarea style="display: none" name="content" id="txtIntro"></textarea>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit_button">保存</button>
      </div>
    </div>
  </form>
</div>




</body>
</html>
    <script src="/static/bews/js/jquery.min.js"></script>
    <script src="/static/wangeditor/index.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
<script>
    //初始化富文本
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: '输入内容...',
        onChange(editor) {
            var $text1 = $('#txtIntro');
            // 获取输入的文本转化html标签
            const html = editor.getHtml()
            $text1.val(html);
            // console.log(html)
        },
        MENU_CONF: {
            uploadImage: {}
        }
    }



    editorConfig.MENU_CONF['uploadImage'] = {
        fieldName: 'img',
        server: '/server/uploadOssImgE',
        maxFileSize: 10 * 1024 * 1024,  //10M
        // base64LimitSize: 5 * 1024 * 1024, // 10M 以下插入 base64
        // 自定义插入图片
        async customInsert(res, insertFn) {
            // res 即服务端的返回结果
            // console.log(res);
            const url = res.data.url
            // 从 res 中找到 url alt href ，然后插图图片
            insertFn(url)
        },
        // 自定义增加 http  header, 其他携带参数见官网
        headers: {
            token: 'eyJhbGciOiJIUzI1NiJ...'
        },
    }


    //上传视频
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/server/uploadVideoOss',
    }




    // 设置代码高亮
    editorConfig.MENU_CONF['codeSelectLang'] = {
        // 代码语言
        codeLangs: [
            { text: 'CSS', value: 'css' },
            { text: 'HTML', value: 'html' },
            { text: 'XML', value: 'xml' },
            { text: 'JAVA', value: 'java' },
            // 其他
        ]
    }






    const editor = createEditor({
        selector: '#editor-container',
        html: "",
        config: editorConfig,
        mode: 'default', // or 'simple'

    })

    //回显
    var con = $('#h-dom').val();
    editor.setHtml(con);

    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })

 /**
     * wangEditor
     * 上传缩略图片到阿里云OSS
     */
    public function uploadOssImgE(Request $request)
    {
        /**
         * 看到有很多人在上传的 时候现实移动到本地文件,然后上传到阿里云
         *大家都知道磁盘IO吧(I是input 输入) O(output 输出)
         *大量的删除文件写入文件对服务器也是有影响的
         */
        if ($request->method() == 'POST') {
            $file = $request->file('img');  //获取到上传的文件
            $ext[] = $file->getOriginalExtension();

            if($file==null){
                exit(json_encode(array('code'=>1,'msg'=>'没有文件上传')));
            }
            $imgFormat = validate(['image'=>'filesize:1024|fileExt:jpg,png,gif,jpeg'])->check($ext);
            if(!$imgFormat){
                exit(json_encode(array('code'=>1,'msg'=>'图片格式不支持')));
            }

            $filepath = $file->getPathname() ;
            $resResult = Image::open($file);  //获取打开图片的信息，包括图像大小、类型等
            // 尝试执行
            try {
                $config = Config::get('aliyun_oss'); //获取Oss的配置

                //实例化对象 将配置传入
                $ossClient = new OssClient($config['KeyId'], $config['KeySecret'], $config['Endpoint']);

                //这里是有sha1加密 生成文件名 之后连接上后缀
                $fileName = sha1(date('YmdHis', time()) . uniqid()) . '.' . $resResult->type();
                //执行阿里云上传
                $result = $ossClient->uploadFile($config['Bucket'], 'demo/'.date('Ymd').'/'.$fileName, $filepath);
                /**
                 * 这个只是为了展示
                 * 可以删除或者保留下做后面的操作
                 */
               if($result){
                   return json([
                       'errno'=>0,
                       'data'=>[
                           'url'=>$result['info']['url'],
                           'alt'=>'资讯中的图片',
                           'href'=>$result['info']['url']
                       ]
                   ]);
               }
            } catch (OssException $e) {
                // return $e->getMessage();
                return json([
                    'errno'=>1,
                    'message'=>'上传失败',
                ]);
            }


            // //将结果输出
            // return json(['status'=>200,'msg'=>'ok','data'=>$arr,'url'=>$arr['img']]);
        }
        return json(['errno'=>1,'message'=>'请求错误']);
    }