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'
  });
});