Tower 开源 Simditor 简单快速的富文本编辑器

Question

Simditor 是 Tower 开源的所见即所得的在线富文本编辑器。Simditor 的理念是保持简单，避免过度的功能，每一个特性都追求极致的用户体验。同时 Simditor 也很容易扩展。

使用方法

下面将介绍 Simditer 的基本使用方法，部分内容摘录自官方网站 http://simditor.tower.im。

下载并引用

在这里下载并解压最新版的 Simditor 文件，然后在页面中引入这些文件：

<link rel="stylesheet" type="text/css" href="[style path]/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

初始化配置

在使用 Simditor 的 HTML 页面里应该有一个对应的 textarea 文本框例如：

<textarea id="editor" placeholder="这里输入内容" autofocus></textarea>

我们需要在这个页面的脚本里初始化 Simditor：

var editor = new Simditor({
  textarea: $('#editor')
});

textarea 是初始化 Simditor 的必需选项，可以接受 jQuery Object、HTML Element 或者 Selector String。

自定义样式和交互

每个项目都有不同的设计风格，大多数时候我们需要修改 Simditor 的样式，让它的样式跟项目的风格相符。

simditor.css 是通过 Sass 自动生成的代码，所以推荐大家修改 simditor.scss，然后再重新生成css代码。

.editor-style 选择符下面的样式，是 Simditor 输出 HTML 的中文排版样式，大家可以根据自己项目的情况进行调整。另外如果不想使用 font-awesome.css 来实现工具栏按钮的 icon，可以将 font-awesome.css 去掉，然后增加 .toolbar-item-[button name] 选择符来自定义按钮样式。

API配置选项

Simditor 支持以下这些可选 option

• placeholder（默认值：''）编辑器的 placeholder，如果为空 Simditor 会取 textarea 的 placeholder 属性；
• toolbar （默认值：true）是否显示工具栏按钮；
• toolbarFloat （默认值：true）是否让工具栏按钮在页面滚动的过程中始终可见；
• toolbarHidden （默认值：false）是否隐藏工具栏，隐藏后 toolbarFloat 会失效；
• defaultImage（默认值：'images/image.png'）编辑器插入混排图片时使用的默认图片；
• tabIndent（默认值：true）是否在编辑器中使用 tab 键来缩进；
• params（默认值：{}）键值对，在编辑器中增加 hidden 字段（input:hidden），通常用于生成 form 表单的默认参数；
• upload（默认值：false）false 或者键值对，编辑器上传本地图片的配置，常用的属性有 url 和 params；
• pasteImage（默认值：false）是否允许粘贴上传图片，依赖 upload 选项，仅支持 Firefox 和 Chrome 浏览器。

更详细的配置说明可以参考 Simditor 的 配置文档。配置完成之后刷新页面，Simditor 应该就可以正确加载了。

默认配置

Simditor 构造函数创建一个新的编辑器实例。通过传递的 options 参数定制实例。下面的示例使用所有选项及其默认值：

editor = new Simditor
textarea: null
placeholder: ''
defaultImage: 'images/image.png'
params: {}
upload: false
tabIndent: true
toolbar: true
toolbarFloat: true
toolbarHidden: false
pasteImage: false

扩展支持

为了保持 Simditor 核心代码的精简，我们通过扩展的形式来支持一些不常用或者不必须的功能。

欢迎开发者们把自己编写的扩展投递给我们，我们会将扩展仓库的链接整理到下面的列表。投递的时候请注明扩展仓库的地址，另外请尽量让扩展仓库的结构跟官方扩展保持一致。

官方扩展

• simditor-emoji：在Simditor中插入emoji表情
• simditor-markdown：给Simditor增加实时markdown的功能
• simditor-mention：给Simditor增加@人的功能

第三方扩展

• simditor-marked：将编辑器内的markdown内容格式化
• simditor-dropzone：拖拽上传混排图片

依赖关系

• jQuery 2.0+
• Mycolorway Simple Module用于组件开发。
• FontAwesome 用于工具栏按钮。
• Mycolorway Simple Uploader 提供本地图片上传功能（可选）。

插件由来

从 2012 年第一版 Tower上线以来，Tower 团队就在寻找一款最为合适的编辑器以供 Tower 的用户使用。最早使用 Wysihtml5 作为 Tower 的编辑器，在前期 Wysihtml5 很好的满足了 Tower 的核心需求，非常方便的添加附件，无论是直接粘贴剪切板里的内容还是拖动上传，Wysihtml5 都很容易实现。

不过随着 Tower 功能的增加，当 Tower 引入 @ 成员、Markdown 功能、代码识别、自动短链等一系列功能以后，第三方开源编辑器的局限性也逐渐暴露出来，这些局限性让 Tower 在很多用户体验和工程复杂性的岔路口上选择向工程复杂性妥协。Tower 认为作为一款在线生产力工具，让用户能极其舒畅地生产内容是它的核心品质之一，因此决定自己开发一款编辑器，这就是 Simditor 产生的原因。

经过不断地改进，Tower 在最近使用 Simditor 替换了 默认编辑器，包括创建讨论、发表回复以及创建在线文档的编辑器，现在都使用 Simditor 了。Tower 认为相比其他的开源编辑器，Simditor 不是一个业余爱好的产物，而是每天被几万人使用的真实产品。

Tower 会非常谨慎地评估究竟什么功能是实际用户最为需要的，而不会因为交互很酷炫，就把功能增加进编辑器里，导致代码膨胀，造成麻烦的后果。

• 下载地址：http://simditor.tower.im/download.html
• github地址：https://github.com/mycolorway/simditor