TP5+wangEditor富文本编辑器（采坑推荐）

最新推荐文章于 2024-04-23 16:20:16 发布

置顶 zz_lkw

最新推荐文章于 2024-04-23 16:20:16 发布

阅读量2k

点赞数 2

分类专栏：后端开发前端文章标签： wangeditor TP5 富文本编辑器轻量级简洁富文本

本文链接：https://blog.csdn.net/zz_lkw/article/details/84070491

版权

后端开发同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

第一步：先上图

第二部(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提交也是一样的，这样就完成了，遇到问题可以在底部给我留言，我会帮你们一一解答

zz_lkw

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
TP5+wangEditor富文本编辑器（采坑推荐）

第一步：先上图第二部(html代码)&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, u
复制链接

扫一扫