tinymde v0.2.0
TinyMDE

TinyMDE 是一个运行在浏览器中的 Markdown 文本编辑器,它提供了一些 API 以便生成特定的 Markdown 语法,例如链接、图片、列表等。
安装
用 NPM 安装
npm install tinymde然后你就可以在代码中引用了:
// CommonJS 语法
const TinyMDE = require('tinymde')
// ES6 模块语法
import TinyMDE from 'tinymde'直接引用 CDN
你可以直接在页面中引用下面的代码获取最新版本的 TinyMDE:
<!-- 压缩过的版本可以使用 https://unpkg.com/tinymde/dist/tinymde.min.js -->
<script src="https://unpkg.com/tinymde"></script>之后你就可以使用全局变量 TinyMDE 了。
API
new TinyMDE(textarea[, options])
有三种方法初始化一个编辑器:
- 使用一个已经存在的 textarea 节点:
new TinyMDE(document.querySelector('textarea')) - 使用 CSS 选择器:
new TinyMDE('textarea') - 让 TinyMDE 帮你创建一个 textarea 节点:
new TinyMDE(textarea => document.body.appendChild(textarea))
options 有这些设置:
saveDelay:用于控制 TinyMDE 自动保存编辑器状态的时间间隔,在用户停止输入后的这段时间内没有检测到input事件就会保存编辑器状态,默认值为3000,单位是毫秒。maxRecords:保存编辑器状态的最大条数,默认值是50。当编辑器状态个数超出这个数字后,会将最前面的状态丢弃。onSave:在 TinyMDE 保存编辑器状态后会调用一下这个函数。
TinyMDE#saveState()
TinyMDE 会在适当的时机保存编辑器状态,但你也可以调用这个方法手动保存编辑器的当前状态。
TinyMDE#undo()
回到编辑器的上一个状态,即“撤销”。
TinyMDE#redo()
前进一个状态,即“重做”。
TinyMDE#bold()
切换选中文本的加粗状态,例如将 text 变为 **text**,反之亦然。
TinyMDE#italic()
切换选中文本的斜体状态,例如将 text 变为 _text_,反之亦然。
TinyMDE#strikethrough()
切换选中文本的删除状态,例如将 text 变为 ~~text~~,反之亦然。
TinyMDE#inlineCode()
切换选中文本的代码状态,例如将 text 变为 `text`,反之亦然。
TinyMDE#blockCode()
切换选中文本的块级代码状态,例如将 text 变为:
```
text
```反之亦然。
TinyMDE#ul()
切换选中文本的无序列表状态,例如将 text 变为:
- text反之亦然。
TinyMDE#ol()
切换选中文本的有序列表状态,例如将 text 变为:
1. text反之亦然。
TinyMDE#quote()
切换选中文本的引用状态,例如将 text 变为:
> text反之亦然。
TinyMDE#task()
切换选中文本的任务列表状态,例如将 text 变为:
- [ ] text反之亦然。
TinyMDE#link(url, text)
根据选中的文本生成一段链接,例如将 text 变成 [text](url),可以根据 url 与 text 参数改变生成的链接的默认值。
TinyMDE#image(url, text)
根据选中的文本生成一段图片,例如将 text 变成 ,可以根据 url 与 text 参数改变生成的图片的默认值。
TinyMDE#hr()
在当前光标所在的位置插入一段 * * *。
TinyMDE#heading(level)
在当前光标所在的这一行开头插入若干个 # 号,可以使用 level 参数控制 # 号的个数。
许可
MIT