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: '二、主观性资料S
包括患者的主诉、现病史、既往史、个人史、家族史等。（可粘贴图片，或上传视频）
',
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: '三、客观性资料0
包括患者的体格检查、实验室检查、影像学检查等。（可粘贴图片，或上传视频）
',
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;
@漏刻有时
