[PHP知识库]summernote 文本编辑器 图片上传

以下示例代码 为laravel框架 blade 模板 写法

summernote官方文档： https://summernote.org/getting-started/#get-summernote

引入资源文件

<link href="you-path/summernote-0.8.18-dist/summernote.css" rel="stylesheet">
<script src="you-path/summernote-0.8.18-dist/summernote.min.js"></script>
<script src="you-path/summernote-0.8.18-dist/lang/summernote-zh-CN.min.js"></script>

HTML

<div class="form-group">
    <label class="col-sm-2 col-sm-2 control-label">内容</label>
    <div class="col-sm-10">
        <textarea class="summernote" id="summernote" name="content"> {!! Request::old('content', ($data->content ?? '')) !!} </textarea>
    </div>
</div>

JS

<script type="text/javascript">
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 200,
            minHeight: null,
            maxHeight: null,
            focus: false,
            lang: 'zh-CN',
            callbacks: {
                onImageUpload: function(files) {
                    console.log(files);
                    uploadSummerPic(files[0]);
                }
            }
        });
    });

    // 上传图片
    function uploadSummerPic(file) {
        var data = new FormData();
        data.append("file", file);
        data.append("_token", "{{ csrf_token() }}");
        $.ajax({
            type: "POST",
            url: "{{ route('CommonUpImg') }}",
            data: data,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
                var img = res.url;
                $('#summernote').summernote('insertImage', img, 'img');//回显到框内很重要
            },
            error: function () {
                alert('上传失败!');
            }
        });
    }
    
</script>

php后台图片上传代码 详见 公用图片上传方法
https://blog.csdn.net/qq_35894434/article/details/108050188