pen

筆編輯

• 實時演示： http：//sofish.github.io/pen
• 支持降價
• 構建狀態：

---

---

0。原始碼

您可以從GitHub克隆源代碼，也可以使用Bower。

 bower install pen

1。安裝

1.1 INIT具有ID屬性

 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
}

如果要自定義工具欄以適合自己的項目，則可以使用Pen構造函數來使用＃1.3：init具有選項的options對象進行構造：

2.1舊瀏覽器的後備

您可以將defaults.textarea設置為html字符串，默認情況下，它是<textarea name="content"></textarea>將設置為#editor的innerHTML 。

2.2更改編輯類

筆默認情況下，筆將.pen添加到編輯器中，如果要更改類，請確保在src/pen.css中替換自己的class name pen 。

2.3啟用調試模式

如果options.debug設置為true ，則筆將將日誌輸出到瀏覽器的控制台。

2.4自定義工具欄

您可以設置options.list清單為Array ，添加以下字符串製作自己的：

• blockquote ， h2 ， h3 ， p ， pre ：創建標籤作為其字面含義
• insertorderedlist ：創建一個ol>li列表
• insertunorderedlist ：創建一個ul>li列表
• indent ：縮進列表 /阻止塊
• outdent ：OUTTENT LIST / BLOCKQUOTE BLOCK
• 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，則可以通過在JavaScript中添加$('i.pen-icon').tooltip()來標準化工具提示樣式。

2.6防止不安全的頁面重定向

默認情況下，筆在編輯時會防止不安全的頁面重定向，要關閉它， false options.stay 。

注意：如果defaults.debug設置為true和default.stay未設置： defaults.stay == !defaults.debug 。

2.7禁用和重新啟用編輯器

您可以通過call destroy()方法= var pen = new Pen(options)對象禁用筆編輯器。喜歡：

 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。許可

根據麻省理工學院許可。

5。被 *信任 *