富文本编辑器 Summernote 从入门到放弃（实例篇）

本文最后更新于：1 年前

前篇把Summernote的用法和配置基本都介绍了一遍，本篇就来实现一个完整的富文本编辑器吧。

需要引入的文件

CSS

1 2	`<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/summernote.min.css">`

JavaScript

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/summernote.min.js"></script>
<script src="lang/summernote-zh-CN.js"></script>
<script src="js/summernote-cleaner.js"></script>

初始化富文本编辑器

HTML

1	`<div id="summernote"></div>`

JavaScript

var $summernote = $('#summernote').summernote({
    height: 350,
    lang: 'zh-CN',
    disableDragAndDrop: true,
    toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['fontname', ['fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture']],
        ['view', ['fullscreen','undo','redo']]
      ],
    styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
    fontNames: ['微软雅黑','宋体','Arial', 'Arial Black', 
    'Comic Sans MS', 'Courier New', 'Merriweather','Tahoma','Verdana']
});

这样一个完整的富文本编辑器就出现了：

接下来根据需要加点别的功能：

设置行高

在初始化的js中添加下面两段的代码：

$('#summernote').summernote({
  toolbar: [
    ['height', ['height']],//行高(自定义行高时一定不要忘记写这个)
  ],
});

下面的代码如果添加到最后一项后面的话，需要给最后一项后面加上逗号再添加。

1
2
3

$('#summernote').summernote({
 lineHeights: ['0.5','1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '9.0'],
});

清除复制文本的格式

清除格式的功能需要引入插件来实现，到这里下载需要的JS文件，然后引入文件，在初始化编辑器的JS中添加下面的代码：

$('#summernote').summernote({
  cleaner:{
    action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
    // newline: '<br>', // Summernote's default is to use '<p><br></p>'
    notStyle: 'position:absolute;top:0;left:0;right:0', // Position of Notification
    // icon: '<i class="note-icon">[Your Button]</i>', //按钮图标
    keepHtml: false, // Remove all Html formats
    keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
    keepClasses: false, // Remove Classes
    badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
    badAttributes: ['style', 'start'], // Remove attributes from remaining tags
    limitChars: false, // 0/false|# 0/false disables option
    limitDisplay: 'text', // text|html|both
    limitStop: false // true/false
  },
});

因为这个插件是英文的，并不支持中文，所以插件里的提示信息也是英文，我们可以在插件里添加上中文的翻译，这样就能显示中文的提示信息了。

打开summernote-cleaner.js，将

$.extend(true, $.summernote.lang, {
  'en-US': {
    cleaner: {
      tooltip: 'Cleaner',
      not: 'Text has been Cleaned!!!',
      limitText: 'Text',
      limitHTML: 'HTML'
    }
  }
});

修改为

$.extend(true, $.summernote.lang, {
  'en-US': {
    cleaner: {
      tooltip: 'Cleaner',
      not: 'Text has been Cleaned!!!',
      limitText: 'Text',
      limitHTML: 'HTML'
    }
  },
  'zh-CN': {
    cleaner: {
      tooltip: 'Cleaner',
      not: '文本格式已被清除',
      limitText: '字数',
      limitHTML: 'HTML'
    }
  }
});

这样提示信息就可以显示为中文了。

图片上传和删除

图片上传

在初始化JS中添加回调函数

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      uploadSummerPic($summernote1, files[0]);
    }
  }
});

回调函数

function uploadSummerPic($summernote, file) {
    var imgFile = new FileReader();
    imgFile.readAsDataURL(file);
    var base64 = '';
    if (file) {
        imgFile.onload = function(evt) {
            base64 = evt.target.result;
            // base64 = base64.substring(base64.indexOf(',')+1);
        }
    }
    setTimeout(function(){
        console.log(base64);
        var sj = {base64:base64};
        var sj = JSON.stringify(sj);
        $summernote.summernote('insertImage','http://127.0.0.1:5500/tianjia.jpg');
    // $.ajax({
    //     type:"POST",
    //     url:"/addimage",
    //     data: sj,
    //     // cache: false,
    //     // contentType: false,
    //     // processData: false,
    //     success: function (res) {
    //         if (res.result == "OK") {
                // var url = 'https://mgr.ytdfzyjt.com/getimage?imgid='+res.img;
                //     $summernote.summernote('insertImage',url);
                // }else{}
    //     }
    // });
    },100)
}