本文基于ThinkPHP+WangEditor实现了富文本+上传图片+上传视频，前端框架采用的是layuimini-2，步骤非常详细，当然也非常简单，例如没有处理上传失败具体情况的返回等。文末提供了WangEditor的压缩包，下面是最终实现效果
下面是具体步骤：
1、编辑器的html：
<div class="layui-form-item"> <label class="layui-form-label">新闻内容</label> <div class="layui-input-block" style="border: 1px solid #ccc;"> <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div> <div id="editor-text-area" style="height: 500px"></div> </div> </div>
2、引入编辑器（引入layui等框架在这里不写了）
<link href="/static/admin/wangeditor/style.css" rel="stylesheet"> <script src="/static/admin/wangeditor/index.js"></script>
3、js初始化配置WangEditor，并回显后端读取的富文本内容
const E = window.wangEditor
/*编辑器配置，开始*/
// 切换语言
window.editor = E.createEditor({
selector: '#editor-text-area',
// 回显数据库查询到的富文本，这里要转换下，否则会把标签也显示到编辑器中，如果是新增，这里留空
html: `{$data.content|html_entity_decode|raw}`,
mode: 'simple',
config: {
placeholder: '请输入新闻内容',
MENU_CONF: {
// 上传图片配置，这里的server为后端上传地址，fieldName为后端接收的文件参数
uploadImage: {
server: '/admin/news/uploadImg',
fieldName: 'file',
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
maxFileSize: 10 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M
base64LimitSize: 1 * 1024 * 1024 // 1M 以下插入 base64
},
// 上传视频配置，这里的server为后端上传地址，fieldName为后端接收的文件参数
uploadVideo: {
server: '/admin/news/uploadVideo',
fieldName: 'file',
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
maxFileSize: 100 * 1024 * 1024 // 单个文件的最大体积限制，默认为 2M
},
}
}
})
E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: ["codeBlock"]
}
})
/*编辑器配置，结束*/4、在保存时，利用editor.getHtml()获取编辑器的内容
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
// 保存时，获取编辑器填写的内容
data.field.content = editor.getHtml()
$.ajax({
type: 'PUT',
url: '/admin/news/'+{$news.id},
data:data.field,
success:(res) => {
var indexWindow = window.top.document.querySelector('[src="admin/news"]')
indexWindow.setAttribute('src','admin/news');
// 关闭当前窗口
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
}
})
return false;
});
});5、php代码，注意上传后返回的数据格式必须按照下面的来，否则WangEditor无法解析结果，就无法将图片、视频插入到编辑器内
public function uploadImg(Request $request)
{
// file('file') 为富文本的文件对应的字段名
$file = $request -> file('file');
$path = \think\facade\Filesystem::putFile('news', $file, 'md5');
$path = str_replace('\\','/',$path);
if($path) {
return json(['errno' => 0, 'data' => ['url' => '/storage/'.$path, 'alt' => '茉酸奶', 'href' => '/storage/'.$path,]]);
} else {
return json(['errno' => 1, 'message' => '上传失败！']);
}
}
public function uploadVideo(Request $request)
{
// file('file') 为富文本的文件对应的字段名
$file = $request -> file('file');
$path = \think\facade\Filesystem::putFile('news', $file, 'md5');
$path = str_replace('\\','/',$path);
if($path) {
// poster为视频封面图，这里就不写了，可以前端实现也可以php实现
return json(['errno' => 0, 'data' => ['url' => '/storage/'.$path, 'poster' => '',]]);
} else {
return json(['errno' => 1, 'message' => '上传失败！']);
}
}最后，附上WangEditor下载地址：https://pan.baidu.com/s/1bvVAJ3V_QFDc0w3V1BbDKQ 提取码: r8p3