介绍

Summernote是一款基于Bootstrap的富文本编辑器，功能强大、轻量级、简单易用，支持文本、图片等多种格式的编辑，同时也有插件系统可供扩展。它支持Markdown语法，可在WYSIWYG和编码之间自由切换，也支持响应式布局和多种主题样式。

下载和安装

下载summernote文件的最新版本，将其包括在HTML文件中

<head>  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css">  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>  
</head>
<body>  
    <textarea id="summernote"></textarea>  
    <script>  
        $(document).ready(function() {  
            $('#summernote').summernote();  
        });  
    </script>  
</body>

常用功能

增加工具栏按钮

可以通过配置来增加工具栏按钮，例如，我们需要增加插入代码功能：

$('#summernote').summernote({  
  toolbar: [  
    ['style', ['style']],  
    ['font', ['bold', 'italic', 'underline', 'clear']],  
    ['fontname', ['fontname']],  
    ['color', ['color']],  
    ['para', ['ul', 'ol', 'paragraph']],  
    ['height', ['height']],  
    ['insert', ['picture', 'link', 'video', 'codeview']],  
    ['view', ['fullscreen', 'help']]  
  ],  
  onInit: function () {  
    $('.note-codeview').addClass('language-markup');  
  }  
});

插入图片

Summernote可以轻松地插入和上传图片。

$('#summernote').summernote({  
  height: 500,  
  tabsize: 2,  
  lang: 'zh-CN',  
  toolbar: [  
    ['style', ['style']],  
    ['font', ['bold', 'italic', 'underline', 'clear']],  
    ['fontname', ['fontname']],  
    ['fontsize', ['fontsize']],  
    ['color', ['color']],  
    ['para', ['ul', 'ol', 'paragraph']],  
    ['height', ['height']],  
    ['table', ['table']],  
    ['insert', ['link', 'picture']],  
    ['view', ['fullscreen', 'codeview', 'help']]  
  ],  
  callbacks: {  
    onImageUpload: function(files, editor, $editable) {  
      uploadImage(files[0], editor, $editable);  
    }  
  }  

});  

function uploadImage(file, editor, $editable) {  
  var url = URL.createObjectURL(file);  
  editor.insertImage($editable, url);  
}

上述代码会打开插入图片界面，可以选择本地的图片并上传，上传成功后可在编辑器中看到图片。