summernote富文本编辑器

Summernote是一款基于 Bootstrap 和 jQuery的轻量级富文本编辑器，项目中使用的是0.8.18版本。

github地址：https://github.com/summernote/summernote

文档地址：https://summernote.org/

中文地址：https://www.summernote.cn/

![](/uploads/images/20220104/822d9cf84eeb33d9573f9c8ee68d9805.png)

给 `<textarea>` 加上 `data-provide="summernote"`。您可以使用数据属性应用 summernote 的选项。例如，要设置高度选项，请将 `data-height="150"` 添加到 `<textarea>` 中，对于 `minHeight` 选项，请使用 `data-min-height="150"`。
```html
<textarea data-provide="summernote" data-min-height="150"></textarea>
```
```javascript
$('[data-provide="summernote"]').each(function() {
    var options = {
        dialogsInBody: true,
        lang: 'zh-CN',
        dialogsFade: true
    };
    
    var config = {};
    $.each( $(this).data(), function(key, value){
        key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});

if ( key == 'provide' ) {
            return;
        }

config[key] = value;
    });
    
    options = $.extend(options, config);
    
    if ( options.toolbar ) {
        switch( options.toolbar.toLowerCase() ) {
          case 'slim':
            options.toolbar = [
              // [groupName, [list of button]]
              ['style', ['bold', 'underline', 'clear']],
              ['color', ['color']],
              ['para', ['ul', 'ol']],
              ['insert', ['link', 'picture']]
            ];
            break;

case 'full':
            options.toolbar = [
              // [groupName, [list of button]]
              ['para_style', ['style']],
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['fontsize', ['fontname', 'fontsize', 'height']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph', 'hr']],
              ['table', ['table']],
              ['insert', ['link', 'picture', 'video']],
              ['do', ['undo', 'redo']],
              ['misc', ['fullscreen', 'codeview', 'help']]
            ];
            break;
        }
    }
    $(this).summernote(options);
});
```

该富文本编辑器还有浮空模式和单击编辑模式。
![](/uploads/images/20220104/2db271f109a57d866e7c12b15b88f997.png)
```html
<div data-provide="summernote" data-air-mode="true">
  <p>富家女逃难托乳母 贫穷汉有幸配淑女</p>
  <ul>
    <li>举金狮叔宝伤力 见白虎仁贵倾家</li>
    <li>大王庄薛仁贵落魄 怜勇士柳金花赠衣</li>
  </ul>
  <p>射鸿雁薛礼逢故旧 赠盘缠周青同投军</p>
</div>
```
![](/uploads/images/20220104/e4b9e763118be0d66f9ac71c597e4005.gif)
```html
<div id="summernote-element">这里是文字信息</div>

<br>
<button class="btn btn-primary" data-summernote-edit="#summernote-element">修改</button>
<button class="btn btn-primary" data-summernote-save="#summernote-element">保存</button>
```
```javascript
$(document).on('click', '[data-summernote-edit]', function(){
    var target = $(this).data('summernote-edit');
    $(target).summernote({focus: true});
});

$(document).on('click', '[data-summernote-save]', function(){
    var target = $(this).data('summernote-save');
    var markup = $(target).summernote('code');
    $(target).summernote('destroy');
    alert('修改完成');
});
```

插件项目中页面名字：`test_summernote.html` `test_summernote_v4.html`

[点击查看 summernote富文本编辑器 在线演示](http://example.itshubao.com/example/132.html "点击查看 summernote富文本编辑器 在线演示")

涉及的文件：
- `js/summernote/summernote.min.css` (v3)
- `js/summernote/summernote.min.js` (v3)
- `js/summernote/lang/summernote-zh-CN.min.js`
- `js/summernote/summernote-bs4.min.css` (v4)
- `js/summernote/summernote-bs4.min.js` (v4)