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