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、2番目のエディタを取得します.

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>


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

導入されたスクリプトをローカル構成で実行

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