summernote富文本编辑器的基本使用

summernote官网: https://summernote.org/

初始化summernote编辑器

1. 首先下载对应的css、js文件。
   下载地址：https://summernote.org/getting-started/

2. 在文件中引入css和js文件
   

3. 在页面上创建富文本区域
   summernote可以使用form，也可以直接使用div标签
   使用div标签

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

   如果有初始内容，直接放在这个div里。

   使用form

   <form method="post">
     <textarea id="summernote" name="editordata"></textarea>
   </form>
   

   建议使用form一个名称属性，因此在提交表单时，您可以使用该名称来处理您的编辑器数据。后端。此外，如果在a中使用Summernote form来设置属性method="post"以允许更大尺寸的编辑器内容解析到后端，那么如果不这样做，您的数据可能无法解析，或者将被截断。

4. 初始化summernote

   $('#summernote').summernote({
       placeholder: '请输入内容', //为空时的提示内容
       height: 300,               //编辑器高度
       minHeight: 500,             // 最小高度
       maxHeight: 1500,             // 最大高度
       focus: true                  // 是否默认获取焦点
   });
   

这样就有了一个富文本编辑器。
demo地址：https://github.com/SuperDalu/summernote_demo
这里我使用了bootstrap， 如果不使用bootstrap请自行参考官网。

自定义工具栏

$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

基本API

1. 获取富文本编辑器的内容

   var markupStr = $('#summernote').summernote('code');
   

   如果初始化多个编辑器，您可以使用jQuery eq获取第二个summernote的HTML内容。

   var markupStr = $('.summernote').eq(1).summernote('code');
   

2. 设置富文本编辑器内容

   var markupStr = 'hello world';
   $('#summernote').summernote('code', markupStr);
   

3. 编辑器内容为空判断
   

   if ($('#summernote').summernote('isEmpty')) {
     alert('editor content is empty');
   }
   

更多关于插入操作的API查看官网： https://summernote.org/deep-dive/#insertion-api