pen

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带有选项

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 // o pen hyperlinks in a new windows/tab
}

var editor = new pen (options);\”>

 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 // o pen hyperlinks in a new windows/tab
}

var editor = new pen ( options ) ; 

2。配置

以下对象设置了pen的默认设置：

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
}\”>

 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具有选项的选项对象进行构造：

2.1旧浏览器的后备

您可以将defaults.textarea设置为html字符串，默认情况下，它是<textaRea name =“ content”> </textarea> this this将设置为#editor的innerhtml。

2.2更改编辑类

pen会添加。默认情况下， pen向编辑器，如果您想更改课程，请确保在SRC/ pen .CSS中替换自己的班级名称pen 。

2.3启用调试模式

如果options.debug设置为true， pen将将日志输出到浏览器的控制台。

2.4自定义工具栏

您可以设置选项。清单为数组，添加以下字符串制作自己的：

• BlockQuote，H2，H3，P，Pre：创建标签作为其字面含义
• insertorderedlist：创建一个OL> li列表
• InsertunOrderedList：创建一个UL> li列表
• 缩进：缩进列表 /阻止块
• OUTTENT：OUTTENT LIST / BLOCKQUOTE BLOCK
• 粗体：将文本选择包装在ab标签中
• 斜体：将文本选择包裹在i标签中
• 下划线：将文本选择包装在AU标签中
• Createlink：插入链接到文本选择
• inserthorizontalrule：插入人力资源标签
• 插入图：插入图像（IMG）标签

2.5将工具提示添加到工具栏图标

您可以将“选项”设置为具有匹配工具栏操作的属性的对象。每个属性的值将用作图标上的标题属性。当鼠标悬停在图标上时，大多数浏览器将显示标题属性作为工具提示。

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

如果您使用的是Bootstrap或jqueryui，则可以通过在JavaScript中添加$（i。pen pen icon\’）。tooltip（）来标准化工具提示样式。

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

默认情况下， pen在编辑时会防止不安全的页面重定向，要关闭它，特定选项。

注意：如果defaults.debug设置为true和default.stay未设置：defaults.stay ==！defaults.debug。

2.7禁用和重新启用编辑器

您可以通过call destry（）方法= var pen = new pen （options）对象禁用pen编辑器。喜欢：

pen (\’#editor\’);

pen .destroy(); // return itself\”>

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

pen . destroy ( ) ; // return itself

而且，有一种称为Rebuild（）的相应方法可以重新启用编辑器：

 pen . rebuild ( ) ; // return itself 

2.8导出内容作为降价

这是一个实验功能

pen (\’#editor\’);

pen .toMd(); // return a markdown string\”>

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

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

3。降价语法支持

3.1安装

语法转换器将通过pen markdown.js自动启用。

pen.js\”></script>
<script src=\”src/markdown.js\”></script>\”>

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

3.2用法

要使用它，您可以在线路启动时键入操作CMD +空格密钥。喜欢：

### This will create a h3 tag

允许以下CMD：

• 标题：键入1〜6＃在线开始
• 无序列表：类型 – 或 *
• 排序列表：类型1。
• 代码块：键入“““\’\’
• 块报价：类型>
• 水平规则：超过3 – ， *，。将创建一个<hr />，就像……

4。许可

根据麻省理工学院许可。

5。被 *信任 *