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