summernote编辑器的配置和使用

Summernote 是一款开源的 HTML5 富文本编辑器，它使用纯 JavaScript 编写，兼容所有现代浏览器，支持实时预览、代码高亮、图片上传、表格插入、链接插入等功能。 Summernote 的使用非常简单，只需要在 HTML 中引入它的 JavaScript 文件即可。

先引入文件：

<link rel="stylesheet" href="summernote.css">
<script src="summernote.js"></script>

然后实例化操作：

$(document).ready(function() {
  $('#summernote').summernote();
});

实例有入参：

var $summernote = $('#textarea').summernote({
    height:300,                 // 设置高度
    minHeight:null,             // 最小高度
    maxHeight:null,             // 最大高度
    focus:true      ,            //自动聚焦
    lang:'zh-CN',
    toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['fontname', ['fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'hr']],
        ['view', ['fullscreen', 'codeview']],
        ['help', ['help']],

    ],
    callbacks: {
        //上传时调用
        onImageUpload: function (files) {
            uploadFile($summernote, files[0]);
        },
        //删除时调用
        onMediaDelete: function (target) {
            removeFile(target);
        }
    }

});


//上传图片
function uploadFile($summernote, file) {
    var data = new FormData();
    data.append('fileKey','file')
    data.append('from','goods')
    data.append("bs_shop", file);
    $.ajax({
        url:"<{:url('upload/image')}>",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            res = JSON.parse(res)
            if (res.code==0){
                console.log('xxx',res)
                $summernote.summernote('insertImage', res.data.url, function ($image) {
                    $image.attr('src', res.data.url);
                });
                //$summernote.summernote('insertImage', res.data.url,'img');
            }

        }
    });
}
//删除图片
function removeFile(target){
    var imgsrc = target[0].currentSrc;
    console.log(imgsrc)
    $.post('page/remove_img.php',{
        imgSrc:imgsrc
    },function(data){
        console.log(data);
    })

}

赋值：

$summernote.summernote('code', "你好，小韦")

取值：

let content = $('#summernote').summernote('code');