富文本编辑器 summernote.js

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

2、Html

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

3、初始化summernote 

  1 /**
  2  * 初始化富文本框 summernote
  3  * */
  4 function initSummernote() {
  5     $('.summernote').summernote({
  6         lang: 'zh-CN',
  7         height: 300,
  8         placeholder: "详情...",
  9         minHeight: null, // set minimum height of editor
 10         maxHeight: null, // set maximum height of editor
 11         focus: false,
 12         disableDragAndDrop: true,
 13         dialogsInBody: true,
 14         dialogsFade: true,
 15         fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
 16         fontNames: [
 17             'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
 18             'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
 19             'Tahoma', 'Times New Roman', 'Verdana', 'Microsoft YaHei'
 20         ],
 21         toolbar: [
 22             // [groupName, [list of button]]
 23             ['style', ['bold', 'italic', 'underline', 'clear', 'fontsize', 'fontname']],
 24             ['color', ['color']],
 25             ['font', ['style', 'strikethrough', 'superscript', 'subscript', 'height']],
 26             //['para', ['ul', 'ol', 'paragraph']],
 27             ['para', ['paragraph']],
 28             //['video', ['video']],
 29             ['picture', ['picture']],
 30             ['link', ['link']],
 31             ['table', ['table']],
 32             //['hr', ['hr']],
 33             ['undo', ['undo']],
 34             ['redo', ['redo']],
 35             ['help', ['help']],
 36             ['codeview', ['codeview']]
 37         ],
 38         callbacks: {
 39             //上传回调
 40             onImageUpload: function (files) { //the onImageUpload API
 41                 var type = $(this).data('type');
 42                 $.each(files, function (i, item) {
 43                     sendFile(item, type);
 44                 });
 45             },
 46             //删除回调
 47             onMediaDelete: function (target) {
 48                 deleteFile(target);
 49             }
 50         }
 51     });
 52     //解决选择图片时 打开本地文件夹时，有延时问题。
 53     $('.note-image-input').prop('accept', 'image/jpeg, image/jpg, image/png, image/gif');
 54 }
 55 /**
 56  * Summernote 上传图片到服务器
 57  * @param {any} file 图片文件
 58  * @param {string} type 图片类型，在textarea 标签 中 添加 data-type 属性 英文 小写
 59  */
 60 function sendFile(file, type) {
 61     data = new FormData();
 62     data.append("file", file);//根据实际情况传参
 63     data.append("dir", type);
 64     $.ajax({
 65         data: data,
 66         type: "POST",
 67         url: "/",
 68         cache: false,
 69         contentType: false,
 70         processData: false,
 71         success: function (result) {
 72             if (result.success) {
 73                 $(".summernote").summernote('insertImage', result.url);
 74             } // the insertImage API
 75         },
 76         error: function () {
 77             alert('上传失败!');
 78         }
 79     });
 80 }
 81 /**
 82  * Summernote 删除到服务器中的图片
 83  * @param {object} target//回调参数
 84  */
 85 
 86 function deleteFile(target) {
 87     var picUrl = target.attr('src');
 88     $.ajax({
 89         data: { },
 90         type: "POST",
 91         url: "/",
 92         processData: true,
 93         success: function (result) {
 94         },
 95         error: function () {
 96             alert('删除失败!');
 97         }
 98     });
 99 
100 }

4、使用：直接调用 

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