ThinkPHP+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、引入编辑器
<link href="/zzzyk.com/wangeditor/style.css" rel="stylesheet">
<script src="/zzzyk.com/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: '/zzzyk.com/uploadImg',
fieldName: 'file',
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['image/*'],
maxFileSize: 10 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M
base64LimitSize: 1 * 1024 * 1024 // 1M 以下插入 base64
},
// 上传视频配置，这里的server为后端上传地址，fieldName为后端接收的文件参数
uploadVideo: {
server: '/zzzyk.com/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: '/zzzyk.com/save?id='+{$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 下载地址：WangEditor
