summernote富文本编辑器的基本使用（一）

summernote富文本编辑器的基本使用（一）

刚刚写了一些summernote的基础使用，但是不慎之下没有保存就清理缓存，把写的内容都清理掉了，好伤心。大家以后在Markdown编辑器写文章一定要记得手动保存啊，这个东西不会自动保存到草稿箱，被坑惨了。 

反正之前的步骤都是关于summernote的一些介绍，也就算了吧。就从基础API看起吧。 

本文主要是跟官网的一些翻译，也锻炼下英语水平。原英文网址http://summernote.org/getting-started/

基础API

初始化 summernote

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

初始化并配置summernote

高度和焦点设置

如果对summernote设置了focus项，在编辑器初始化之后会自动获取焦点。

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});
           

对高度进行设置后，如果内容超过编辑器高度会出现滚动条。否则，编辑器高度会随内容高度变化而变化。

编辑器的销毁（destroy）

销毁summernote

$('#summernote').summernote('destroy');
           

获取&设置HTML内容（get&set）

获取编辑器内的HTML内容

var markupStr = $('#summernote').summernote('code');
           

如果初始化了多个编辑器，可以通过jquery的eq方法获取某个编辑器的HTML内容。eg,获取第二个编辑器的。

var markupStr = $('.summernote').eq(1).summernote('code');
           

给指定的编辑器设置HTML内容

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);
           

国际化支持

语言

引入需要支持的语言库。eg. summernote-ko-KR.js

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>
           

通过本地配置运行引入的脚本

$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});