富文本编辑器summernote

发表于

概要

今天介绍一款比较简单的富文本编辑器summernote，使用它的原因是简单易上手，图片直接使用base64保存，可以不用考虑图片附件上传的问题，应对一般的富文本需求还是绰绰有余的。

使用

  1. 首先引入js和css包

    1
    2
    3
    4
    5
    6
    <!-- 插件引入 -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
    <!--引入中文JS包-->
    <script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script>

  2. 再在html中加入载体

    1
    2
    <div class="summernote">
    </div>

  3. 然后在JavaScript中初始化，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $("#summernote").summernote({
      lang : 'zh-CN',// 语言
      height : 496, // 高度
      minHeight : 300, // 最小高度
      placeholder : 'Hello Bootstrap 4', // 提示
    });
    //destroy
    $('#summernote').summernote('destroy');
    //get
    var markupStr = $('#summernote').summernote('code');
    //set
    var markupStr = 'hello world';
    $('#summernote').summernote('code', markupStr);

  4. 效果如下

    image-20200705203722511

  5. 更多的API可以直接去官网查看

总结

总之，这个插件简单易上手，更多API操作需要自己一个一个去探索。