wangEditer+Lavarel+php开发实例

1前台HTML

<div class="form-group row">
                    <label for="" class="col-2 text-right">正文</label>
                    <div id="editor" class="col-10" style="background: white;z-index: 0;padding: 0"></div>
                    <input type="hidden" id="editorval" name="values" value="{{old("values")}}">
                </div>
 <div class="form-group row">
                    <div class="col-2"></div>
                    <div class="col-10 text-center">
                        <button type="submit" class="btn btn-primary" onclick="preFormSubmit()">确认提交</button>
                    </div>
                </div>

2.JS代码

    <script src="{{ asset("static/plugins/wangEditor.js") }}"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var E = window.wangEditor
        var editor = new E('#editor')
        editor.customConfig.menus = [
            'head',
            'bold',
            'italic',
            'justify',
            'foreColor',
            'image',
        ]
        editor.customConfig.showLinkImg = false
        //上传图片时刻自定义设置 header(这里结合laravel的csrf防护)
        editor.customConfig.uploadImgHeaders = {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        };
        editor.customConfig.uploadImgServer = "{{ route('ctext_value_img') }}";

        editor.customConfig.uploadFileName = 'image';
        // 将图片大小限制为 20M
        editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024

        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url =result.data;
                insertImg(url);

                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        editor.create()
        editor.txt.html($("#editorval").val())

        function preFormSubmit() {
            $("<input>", {
                type: 'hidden',
                val: editor.txt.html(),
                name: 'values',
            }).appendTo($('.panel-form'));
            // return true
        }
    </script>

3.php后台服务

 /**
     * 上传ctext正文内容插图
     *
     * @param  Request  $request
     *
     * @return array
     */
    public function uploadCtextValueImg(Request $request) {
        // 判断当前用户是否已经登录
        IsLogin();
        $file   = $request->file('image');
        //获取文件扩展名
        $ext      = $file->extension();
        //保存路径前缀
        $savePath = config("globalconst.xxx")."/".date("Y-m-d");
        //保存文件名
        $saveName = time().'.'.$ext;
        //复制文件操作
        $path = $file->storeAs(
            $savePath, $saveName, 'Dict'
        );
        //必须返回json字符串，否则前台会报错
        return ['errno' => 0, 'data' => [config("app.url").'/pb_img/'.$path]];

    }