wangEditor编辑器的引入

下载wangEditor编辑器

http://www.wangeditor.com/doc/
这是官网地址下载方法可以去这里下载

基于tp引入编辑器

由于我用的是官方的压缩包，我放入tp公共目录public下面
js引入编辑器

<script type="text/javascript" src="STATIC/node_modules/wangeditor/dist/wangEditor.min.js"></script>

使用编辑器

1.给定编辑器位置

<div id="div1"></div>

2.初始化编辑器并使用

<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.config.uploadImgServer = '/upload_img'
    editor.config.uploadImgShowBase64 = true
    editor.txt.html('#val');
    // 配置 onchange 回调函数
    editor.config.onchange = function (newHtml) {
        console.log('change 之后最新的 html', newHtml)
        document.getElementById('val').value=newHtml;
    }
    // 配置触发 onchange 的时间频率，默认为 200ms
    editor.config.onchangeTimeout = 500 // 修改为 500ms
    editor.create()

</script>

3。完整的代码

<div class="login">
    <h3>Login</h3>
    <form method="post" action="" enctype="multipart/form-data" >
        <div> <span>账号</span><input type="text" name="id" value=""></div>
        <div> <span>密码</span><input type="text" name="name"  value=""></div>
        <div> <span>批量导入收件人</span><input type="file" name="xlsxs" placeholder="收件人(多个收件人请用逗号,隔开)" required="required" /></div>
<!--        <div> <span>批量导入收件人</span><input type="text" name="xlsxs" placeholder="收件人(多个收件人请用逗号,隔开)" required="required"></div>-->
        <div> <span>标题</span><input type="text" name="t" placeholder="标题" required="required" /></div>
        <div><input type="hidden" name="v" id = "val" placeholder="内容" required="required" value="" /></div>
        <div id="div1"></div>
        <button type="submit" class="btn btn-primary btn-block btn-large">发送</button>
    </form>

</div>

<script type="text/javascript" src="STATIC/node_modules/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.config.uploadImgServer = '/upload_img'
    editor.config.uploadImgShowBase64 = true
    editor.txt.html('#val');
    // 配置 onchange 回调函数
    editor.config.onchange = function (newHtml) {
        console.log('change 之后最新的 html', newHtml)
        document.getElementById('val').value=newHtml;
    }
    // 配置触发 onchange 的时间频率，默认为 200ms
    editor.config.onchangeTimeout = 500 // 修改为 500ms
    editor.create()

</script>

这样就可以成功引入编辑器了。
还有一种就是引入官网的js，但是我不太支持这个
我这边还做了一个自定义的图片
前端图片路径代码

editor.config.uploadImgServer = '/upload_img'

后端处理代码

/**
     * @return \think\response\Json 上传图片
     */
    public function upload_img()
    {
        $files = request()->file();
        foreach($files as $file){
            $savename = \think\facade\Filesystem::putFile( 'topic', $file);
            $errors = true;
            if(!file_exists('public/'.$savename)){
                $errors = false;
            }
            $img_info = getimagesize($savename);
            $img_src = "data:{$img_info['mime']};base64," . base64_encode(file_get_contents($savename));
            $imags[] = $img_src;
        }
        //输出wangEditor规定的返回数据
        if(!$errors){
            $msg['errno'] = 0;
            $msg['data'] = $imags;
            return json($msg);
        }else{
            $msg['errno'] = 1;
            $msg['data'] = $imags;
            $msg['msg'] = "上传出错";
            return json($msg);
        }
    }

因为我给定了路由所以前端给定的路径根据你的方法加路由的方式。
更多方法请看官网文档
http://www.wangeditor.com/doc/