菜单 搜索
首页 前端知识 wangEditor富文本编辑器的调用开发实录(v5版本、多个编辑器、php后端上传视频阿里云OSS、编辑HTML回显)

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

2024-08-23 20:08:59 前端知识 前端哥 789 138 我要收藏
  1. wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
  2. 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;
复制

@漏刻有时

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16632.html
标签
阿里云
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！