laravel 和wangEditor3.1富文本编辑器的使用

准备

1.开启php.ini中的php_fileinfo扩展

2.设置.env中的APP_URL=xxx

配置:

在主模板文件中加入头(为了image图片的上传)

<meta name="csrf-token" content="{{ csrf_token() }}">

html部分:

 <form action="/article/add" method="POST">
            <div class="form-group">
                <label>标题</label>
                <input name="title" type="text" class="form-control" placeholder="这里是标题">
            </div>
            <div class="form-group">
                <div class="form-group">
                    <label>内容</label>
                    {{--富文本编辑器--}}
                    <div id="div1" class="toolbar">
                    </div>
                    <div style="padding: 5px 0; color: #ccc"></div>
                    {{--<div id="div2" class="text" name="content"  class="form-control"> <!--可使用 min-height 实现编辑区域自动增加高度-->--}}
                    </div>
                </div>
                <button type="button" class="btn btn-default" id="btn">提交</button>
        </form>

javascript部分

<script type="text/javascript" src="/js/wangEditor.js"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var E = window.wangEditor;
        var editor = new E('#div1');
        // editor.customConfig.debug = true;
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/article/upimg';

        // 设置文件的name值
        editor.customConfig.uploadFileName = 'wangEditorH5File';

        // 设置 headers（举例）
        editor.customConfig.uploadImgHeaders = {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        };
        // 上传文件监听
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url = result.data;
                //上传图片回填富文本编辑器
                insertImg(url);
            }
        };
        editor.create();

        document.getElementById('btn').addEventListener('click', function () {
            var res = editor.txt.html();
            alert(res);
            var title = $("input[name=title]").val();
            $.ajax({
                url: '/article/add',
                method: 'POST',
                dataType: "json",
                data: {
                    'content': res,
                    'title': title
                },
                success: function (data) {
                    console.log(data);
                    if (data.error != 0) {
                        return;
                    }
                    window.location.href = '/';
                }
            });
        }, false);
    </script>

laravel部分:

//图片上传部分   
 public function upimg(){
        $path = request()->file('wangEditorH5File')->storePublicly(md5(time()));
        $data = asset('storage/' . $path);
        echo json_encode(array(
            "error" => 0,
            "data" => $data,
        ));
    }
//文章入库部分

图片上传设置部分:

config/filesystems.php文件disks项中public需要在.env文件中设置

FILESYSTEM_DRIVER=public

注意，还需要设置上传文件的软链接，因为上传的图片无法访问除 public 以外的目录。

php artisan storage:link