富文本编辑器 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()就可以完成初始化。