光年模板说明文档
主题
字号
18px

summernote富文本编辑器

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

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

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

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

给 <textarea> 加上 data-provide="summernote"。您可以使用数据属性应用 summernote 的选项。例如，要设置高度选项，请将 data-height="150" 添加到 <textarea> 中，对于 minHeight 选项，请使用 data-min-height="150"。

<textarea data-provide="summernote" data-min-height="150"></textarea>
$('[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);
});

该富文本编辑器还有浮空模式和单击编辑模式。 

<div data-provide="summernote" data-air-mode="true">
  <p>富家女逃难托乳母 贫穷汉有幸配淑女</p>
  <ul>
    <li>举金狮叔宝伤力 见白虎仁贵倾家</li>
    <li>大王庄薛仁贵落魄 怜勇士柳金花赠衣</li>
  </ul>
  <p>射鸿雁薛礼逢故旧 赠盘缠周青同投军</p>
</div>

<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>
$(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富文本编辑器 在线演示

涉及的文件：