pen

ペン編集者

• ライブデモ： http：//sofish.github.io/pen
• マークダウンがサポートされています
• ステータスの構築：

---

---

0。ソースコード

Githubからソースコードをクローンするか、Bowerを使用できます。

 bower install pen

1。インストール

ID属性を使用した1.1 init

 var editor = new Pen ( '#editor' ) ; 

1.2要素を使用したinit

 var editor = new Pen ( document . getElementById ( 'editor' ) ) ; 

1.3オプション付きのinit

 var options = {
  editor : document . body , // {DOM Element} [required]
  class : 'pen' , // {String} class of the editor,
  debug : false , // {Boolean} false by default
  textarea : '<textarea name="content"></textarea>' , // fallback for old browsers
  list : [ 'bold' , 'italic' , 'underline' ] , // editor menu list
  linksInNewWindow : true // open hyperlinks in a new windows/tab
}

var editor = new Pen ( options ) ; 

2。構成

次のオブジェクトは、ペンのデフォルト設定をセットアップします。

 defaults = {
  class : 'pen' ,
  debug : false ,
  textarea : '<textarea name="content"></textarea>' ,
  list : [
    'blockquote' , 'h2' , 'h3' , 'p' , 'insertorderedlist' , 'insertunorderedlist' ,
    'indent' , 'outdent' , 'bold' , 'italic' , 'underline' , 'createlink'
  ] ,
  stay : true ,
  linksInNewWindow : false
}

独自のプロジェクトに合わせてツールバーをカスタマイズしたい場合は、＃1.3：init with with withのようなoptionsオブジェクトを使用してPenコンストラクターをインスタンス化できます。

2.1古いブラウザのフォールバック

defaults.textarea HTML文字列の一部に設定できます。デフォルトでは、 <textarea name="content"></textarea>は、 #editorのinnerHTMLとして設定されます。

2.2エディタークラスを変更します

ペンはデフォルトで編集者に.penを追加します。クラスを変更する場合は、クラス名pen src/pen.cssの独自に置き換えてください。

2.3デバッグモードを有効にします

options.debugがtrueに設定されている場合、Penはブラウザのコンソールにログを出力します。

2.4ツールバーをカスタマイズします

options.listをArrayに設定するには、次の文字列を追加して独自の文字列を作成できます。

• blockquote 、 h2 、 h3 、 p 、 pre ：その文字通りの意味としてタグを作成する
• insertorderedlist ： ol>liリストを作成します
• insertunorderedlist ： ul>liリストを作成します
• indent ：インデントリスト /ブロッククロートブロック
• outdent ：アウトドなリスト /ブロッククオートブロック
• bold ：テキストの選択をbタグで包む
• italic ：テキストの選択をiタグに包む
• underline ：テキストの選択をuタグに巻き付ける
• createlink ：テキストの選択へのリンクを挿入します
• inserthorizontalrule ： hrタグを挿入します
• insertimage ：画像（ img ）タグを挿入します

2.5ツールチップをツールバーアイコンに追加します

ツールバーアクションに一致するプロパティを備えたオブジェクトにoptions.titlesを設定できます。各プロパティの値は、アイコンのタイトル属性として使用されます。ほとんどのブラウザは、マウスがアイコンの上にホバーすると、タイトル属性をツールチップとして表示します。

 options . title = {
    'blockquote' : 'Blockquote'
    'createlink' : 'Hyperlink'
    'insertimage' : 'Image'
}

bootstrapまたはjqueryuiを使用している場合は、 $('i.pen-icon').tooltip()を追加することでツールチップスタイルを標準化できます。

2.6安全でないページのリダイレクトを防ぎます

デフォルトでは、PENは編集時に危険なページのリダイレクトを防ぎ、編集するために、 falseのoptions.stay 。

注： defaults.debugがtrueに設定されている場合、 default.stayが設定されていません： defaults.stay == !defaults.debug 。

2.7無効化および再度編集者

var pen = new Pen(options)オブジェクトのCall destroy()メソッドでペンエディターを無効にできます。のように：

 var pen = new Pen ( '#editor' ) ;

pen . destroy ( ) ; // return itself

そして、 rebuild()と呼ばれる対応する方法があり、編集者を再度有効にします。

 pen . rebuild ( ) ; // return itself 

2.8マークダウンとしてコンテンツをエクスポートします

実験的な機能です

 var pen = new Pen ( '#editor' ) ;

pen . toMd ( ) ; // return a markdown string 

3.マークダウン構文サポート

3.1インストール

構文コンバーターは、 `pen.jsの後にmarkdown.jsリンクすることにより、自動的に有効になります。

 < script src =" src/pen.js " > </ script >
< script src =" src/markdown.js " > </ script > 

3.2使用

それを使用するには、行の開始時にaction cmd + space keyを入力できます。のように：

 ### This will create a h3 tag

次のCMDが許可されています。

• 見出し：ライン開始時のタイプ1〜6 #
• 順序付けられていないリスト：タイプ-または*
• 注文リスト：タイプ1.
• コードブロック： `` `を入力します
• 見積もりをブロック：タイプ>
• 水平ルール：3 - 、 * . <hr />を作成します......

4。ライセンス

MITの下でライセンスされています。

5。信頼されている *