N的小屋

官方文档
http://www.wangeditor.com/doc/

前端代码

<script src="http://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#weditor')
    const $text1 = $('#content')
    editor.config.onchange = function(html) {
        // 第二步，监控变化，同步更新到 textarea
        // html = html.replace('xmp', 'pre')
        $text1.val(html)
    }
    editor.config.uploadImgMaxSize = 10 * 9999 * 9999 // 10M
    editor.config.uploadImgServer = 'upload.php' //设置上传文件的服务器路径
    editor.config.uploadFileName = "file"; //文件名称  也就是你在后台接受的 参数值
    editor.config.uploadImgHeaders = { //header头信息 
        'Accept': 'text/x-json'
    }
    editor.create()
    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html())
    // editor.config.debug = true;

    //上传图片的回调函数
    editor.config.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result.data[0].url)
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.data[0].url)
        }
    }
</script>

后端代码(upload.php)

<?php
header('Content-Type:application/json; charset=utf-8');
function images()
{
    //图片文件的生成
    $savename = date('YmdHis', time()) . mt_rand(0, 9999) . '.jpeg';
    //生成文件夹
    $imgdirs = "upload/image/" . date('Y-m-d', time()) . '/';
    mkdirs($imgdirs);
    //图片保存的路径
    $savepath =  $imgdirs . $savename;
    $url = "http://nikiss.top";
    //生成一个URL获取图片的地址
    //返回数据。wangeditor3 需要用到的数据 json格式的
    $imgdata = array();
    $imgdata[] = array('url' => $url);
    $data = array('errno' => 0, 'data' => $imgdata);
    move_uploaded_file($_FILES["file"]["tmp_name"], $savepath);
    //返回数据
    echo json_encode($data);
}
//创建文件夹 权限问题
function mkdirs($dir, $mode = 0777)
{
    if (is_dir($dir) || @mkdir($dir, $mode)) return TRUE;
    if (!mkdirs(dirname($dir), $mode)) return FALSE;
    return @mkdir($dir, $mode);
}
images();

后端接口就是把发过来的图片，保存到目标路径，然后把图片路径返回回去给前端，就这样