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

https://blog.csdn.net/timsqin/article/details/80534669

首先是引入：

<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>  

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

附上一些基本用法：

设置内容

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

清空

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

隐藏/显示

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

判断是否为空

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