一个简约漂亮的富文本编辑器-summernote

首先是引入：

<link href="~/Content/summernote/dist/summernote.css" rel="stylesheet" />

 <script src="~/Content/summernote/dist/summernote.js">script>
 <script src="~/Content/summernote/lang/summernote-zh-CN.js">script>  //中文包

使用：

<div>
      <textarea  id="Content">textarea>
  div>

初始化：

 <script>
        $(document).ready(function () {
            $('#Content').summernote({
                height: 400,
                minHeight: 400,
                maxHeight: 400,
                placeholder: "请输入内容",
                lang: 'zh-CN',
                dialogsFade: true,  //模态框淡入淡出
                toolbar: [
                    ['history', ['undo', 'redo']],
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture']],
                    ['view', ['fullscreen', 'help']],
                ]
            });
        });

script>

修改过样式，去掉了下拉伸缩的功能

附上一些基本用法：

编辑、只读状态

var edit = function() {
  $('#Content').summernote({focus: true});
};

var save = function() {
  var markup = $('#Content').summernote('code');
  $('#Content').summernote('destroy');
};

清空

$('#Content').summernote('reset');

插入内容

$('#Content').summernote('insertText', '内容');

隐藏/显示

$('#Content').summernote('disable');
$('#Content').summernote('enable');

判断是否为空

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