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

首先是引入：

[html]  view plain  copy

1. <link href="~/Content/summernote/dist/summernote.css" rel="stylesheet" />  
2.   
3.  <script src="~/Content/summernote/dist/summernote.js"></script>  
4.  <script src="~/Content/summernote/lang/summernote-zh-CN.js"></script>  //中文包  

使用：

[html]  view plain  copy

1. <div>  
2.       <textarea  id="Content"></textarea>  
3.   </div>  

初始化：

[html]  view plain  copy

1.  <script>  
2.         $(document).ready(function () {  
3.             $('#Content').summernote({  
4.                 height: 400,  
5.                 minHeight: 400,  
6.                 maxHeight: 400,  
7.                 placeholder: "请输入内容",  
8.                 lang: 'zh-CN',  
9.                 dialogsFade: true,  //模态框淡入淡出  
10.                 toolbar: [  
11.                     ['history', ['undo', 'redo']],  
12.                     ['style', ['style']],  
13.                     ['font', ['bold', 'underline', 'clear']],  
14.                     ['fontname', ['fontname']],  
15.                     ['color', ['color']],  
16.                     ['para', ['ul', 'ol', 'paragraph']],  
17.                     ['table', ['table']],  
18.                     ['insert', ['link', 'picture']],  
19.                     ['view', ['fullscreen', 'help']],  
20.                 ]  
21.             });  
22.         });  
23.   
24. </script>  

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

附上一些基本用法：

编辑、只读状态

[html]  view plain  copy

1. var edit = function() {  
2.   $('#Content').summernote({focus: true});  
3. };  
4.   
5. var save = function() {  
6.   var markup = $('#Content').summernote('code');  
7.   $('#Content').summernote('destroy');  
8. };  

清空

[html]  view plain  copy

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

插入内容

[html]  view plain  copy

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

隐藏/显示

[html]  view plain  copy

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

判断是否为空

[html]  view plain  copy

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