第一步:先上图
第二部(html代码)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="{:url('Admin/Test/add')}" method="post">
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" name="lala" style="width:100%; height:200px;"></textarea>
<button>提交</button>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
var $text1 = $('#text1')
//editor.customConfig.uploadImgServer = '/Admin/Article/upload'; // 上传图片到服务器
/* 处理上传图片的controller路径 */
editor.customConfig.uploadImgServer = '/Admin/Test/uploads'; //上传URL
editor.customConfig.uploadImgMaxSize = 100 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 100;
editor.customConfig.uploadFileName = 'file';//服务端接收file的名字
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
console.log(result);
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url =result.data;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.customConfig.debug = true
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$text1.val(html)
}
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>
</body>
</html>
第三部 :TP5上传图片代码
public function uploads()
{
$file = request()->file('file');
//上传回调error为0
if(empty($file)){
$result["error"] = "1";
$result['data'] = '';
}else{
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/editor' );
if($info){
$name_path =$info->getSaveName();
//成功上传后 获取上传信息
$name_path =str_replace('\\',"/",$info->getSaveName());
$result["error"] = '0';
$result['data'] = "/uploads/editor/".$name_path;
}else{
// 上传失败获取错误信息
$result["code"] = "2";
$result['data'] ='';
}
}
exit(json_encode($result));
}
第四部:post方法提交就可以,使用ajax提交也是一样的,这样就完成了,遇到问题可以在底部给我留言,我会帮你们一一解答