富文本编辑器 summernote.js

1、引用js  可在 https://summernote.org/ 官网下载 ，并查看详细的API  引入：summernote.js 和 summernote-zh-CN.js 以及样式文件：summernote.css

2、Html

 <textarea class="summernote" data-type="w"></textarea> 

3、初始化summernote 

/**
 * 初始化富文本框 summernote
 * */
function initSummernote() {
    $('.summernote').summernote({
        lang: 'zh-CN',
        height: 300,
        placeholder: "详情...",
        minHeight: null, // set minimum height of editor
        maxHeight: null, // set maximum height of editor
        focus: false,
        disableDragAndDrop: true,
        dialogsInBody: true,
        dialogsFade: true,
        fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
        fontNames: [
            'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
            'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
            'Tahoma', 'Times New Roman', 'Verdana', 'Microsoft YaHei'
        ],
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['bold', 'italic', 'underline', 'clear', 'fontsize', 'fontname']],
            ['color', ['color']],
            ['font', ['style', 'strikethrough', 'superscript', 'subscript', 'height']],
            //['para', ['ul', 'ol', 'paragraph']],
            ['para', ['paragraph']],
            //['video', ['video']],
            ['picture', ['picture']],
            ['link', ['link']],
            ['table', ['table']],
            //['hr', ['hr']],
            ['undo', ['undo']],
            ['redo', ['redo']],
            ['help', ['help']],
            ['codeview', ['codeview']]
        ],
        callbacks: {
            //上传回调
            onImageUpload: function (files) { //the onImageUpload API
                var type = $(this).data('type');
                $.each(files, function (i, item) {
                    sendFile(item, type);
                });
            },
            //删除回调
            onMediaDelete: function (target) {
                deleteFile(target);
            }
        }
    });
    //解决选择图片时 打开本地文件夹时，有延时问题。
    $('.note-image-input').prop('accept', 'image/jpeg, image/jpg, image/png, image/gif');
}
/**
 * Summernote 上传图片到服务器
 * @param {any} file 图片文件
 * @param {string} type 图片类型，在textarea 标签 中 添加 data-type 属性 英文 小写
 */
function sendFile(file, type) {
    data = new FormData();
    data.append("file", file);//根据实际情况传参
    data.append("dir", type);
    $.ajax({
        data: data,
        type: "POST",
        url: "/",
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            if (result.success) {
                $(".summernote").summernote('insertImage', result.url);
            } // the insertImage API
        },
        error: function () {
            alert('上传失败!');
        }
    });
}
/**
 * Summernote 删除到服务器中的图片
 * @param {object} target//回调参数
 */

function deleteFile(target) {
    var picUrl = target.attr('src');
    $.ajax({
        data: { },
        type: "POST",
        url: "/",
        processData: true,
        success: function (result) {
        },
        error: function () {
            alert('删除失败!');
        }
    });

}

4、使用：直接调用 

initSummernote()就可以完成初始化。