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