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。被 *信任 *