一个简约漂亮的富文本编辑器-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>  

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

一个简约漂亮的富文本编辑器-summernote_第1张图片

附上一些基本用法:

编辑、只读状态

[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. }  

你可能感兴趣的:(一个简约漂亮的富文本编辑器-summernote)