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

本文主要是介绍wangEditor富文本编辑器的调用开发实录(v5版本、多个编辑器、php后端上传视频阿里云OSS、编辑HTML回显)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

一、多个编辑器

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, // 1MallowedFileTypes: ['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, // 100MmaxNumberOfFiles: 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.获取验证tokenif ($token != $_SESSION['upToken'] || $token == "") {$res['errno'] = 1;$res['message'] = "非法传参页面，请刷新重新上传" . $token;session_destroy(); //验证码自动销毁;die(json_encode_lockdata($res));}//04.判断文件大小1Mif ($file["size"] > 100 * 1024 * 1024) {$res['code'] = 1;$res['message'] = "文件大小不能超过100M";die(json_encode_lockdata($res));}//05-执行上传;//阿里云OSSif ($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;

---

@漏刻有时

这篇关于wangEditor富文本编辑器的调用开发实录(v5版本、多个编辑器、php后端上传视频阿里云OSS、编辑HTML回显)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---