Sym - 一个用 Java 实现的现代化社区平台 • 源码注册

Pipe - 小而美的开源博客平台 • 体验皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

Vditor 使用指南

Start

CommonJS

  • 安装依赖
    npm install vditor --save
  • 在代码中引入
    import Vditor from 'vditor'
    @import "~vditor/dist/index.classic.css" // 或者使用 index.dark.css
  • 初始化对象
    const vditor = new Vditor(id, {options...})
    vditor.focus()

HTML script

  • 在 HTML 中插入 css 和 js,0.1.7 为 vditor 版本号。
    <!-- 可使用 index.dark.css 或 index.classic.css -->
    <link rel="stylesheet" href="https://vditor.b3log.org/0.1.7/index.classic.css" />
    <script src="http://vditor.b3log.org/0.1.7/index.min.js"></script>
  • 初始化对象
    const vditor = new Vditor(id, {options...})
    vditor.focus()

API

options

说明 默认值
cache 是否使用 localStorage 进行缓存 true
height 编辑器总高度 'auto'
width 编辑器总宽度,支持 % 'auto'
placeholder 输入区域为空时的提示 ''
lang 多语言:en_US, zh_CN 'zh_CN'
counter 计数器 0
input 输入后触发 (value: string, previewElement?: HTMLElement): void -
focus 聚焦后触发 (value: string): void -
blur 失焦后触发 (value: string): void -
esc esc 按下后触发 (value: string): void -
ctrlEnter ctrl+enter 按下后触发 (value: string): void -
select 编辑器中选中文字后触发 (value: string): void -

options.toolbar

  • 工具栏,可使用 name 进行简写:['emoji', 'br', 'bold', '|', 'line']。默认值参见 src/ts/util/OptionsClass.ts
  • name 可枚举为:emoji, headings, bold, italic, strike, |, line, quote, list, ordered-list, check, code, inline-code, undo, redo, upload, link, table, record, preview, fullscreen, info, help, br
说明 默认值
name 唯一标示 -
icon svg 图标 -
tip 提示 -
tipPosition 提示位置:ne, nw -
hotkey 快捷键,目前仅支持 ctrl + 任意键 -
suffix 插入编辑器中的后缀 -
prefix 插入编辑器中的前缀 -

options.preview

说明 默认值
delay 预览 debounce 毫秒间隔 1000
show 是否显示预览区域 false
parse 预览回调 (element: HTMLElement): void -
url md 解析请求 -

options.hint

说明 默认值
delay 提示 debounce 毫秒间隔 200
emoji 默认表情,可从 src/ts/emoji/allEmoji.ts 中选取 {'+1': '👍', '-1': '👎', 'heart': '❤️', 'cold_sweat': '😰'}
emojiTail 常用表情提示 -
at @用户回调,(value: string): Array,需同步返回数组 [{value:'', html:''}] -

options.upload

说明 默认值
url 上传 url,查看规范 ''
max 上传文件最大 Byte 10 * 1024 * 1024
linkToImgUrl 剪切板中包含图片地址时,使用此 url 重新上传 ''
success 上传成功回调 (textarea: HTMLTextAreaElement, msg: string): void -
error 上传失败回调 (msg: string): void -
token CORS 上传验证,头为 X-Upload-Token -
filename 文件名安全处理 name => name.replace(/\W/g,'')

options.resize

说明 默认值
enable 是否支持大小拖拽 false
position 拖拽栏位置:top, bottom 'bottom'
after 拖拽结束的回调 (height: number): void -

options.classes

说明 默认值
preview 预览元素上的 className ''

methods

说明
getValue() 获取编辑器内容
insertValue(value: string) 在焦点处插入内容
focus() 聚焦到编辑器
blur() 让编辑器失焦
disabled() 禁用编辑器
enable() 接触编辑器禁用
setSelection(start: number, end: number) 选中从 start 开始到 end 结束的字符串
getSelection():string 返回选中的字符串
setValue(value: string) 设置编辑器内容
renderPreview(value?: string) 设置预览区域内容
getCursorPosition():{top: number, left: number} 获取焦点位置
deleteValue() 删除选中内容
updateValue(value: string) 更新选中内容
isUploading() 上传是否还在进行中
clearCache() 清除缓存
disabledCache() 禁用缓存
enableCache() 启用缓存

Dev

  1. 安装 node LTS 版本
  2. 下载 最新代码并解压
  3. 根目录运行 npm install
  4. npm run dev 启动 webpack 开发环境
  5. npm run start 启动本地服务器,打开 http://localhost:9000/demo
  6. 修改代码
  7. npm run build 打包代码到 dist 目录

注意事项:


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

21 评论
88250 • 2019-02-12
回复 删除
  1. 预览和最终渲染效果会不一致,比如前端有的标签、属性没过滤而后端过滤了
  2. 不安全的 HTML 一旦入库,后面要更新就比较麻烦了

所以我觉得后端渲染更好啊,性能问题不用太过担心,目前黑客派上面我还没发现 md 渲染慢,即使是边打字边看实时预览的情况。这一点其实很好理解,现在连编程语言的自动完成都可以通过后端解析来做,更何况 md 这样语法简单的文本。

Vanessa • 2019-02-15
回复 删除

上传和 MD 解析的接口用的是第三方的。后期会内置 MD 解析。请关注 https://github.com/b3log/vditor/issues/9

q2484877 • 2019-02-16
回复 删除

后端渲染的时候,时序图和流程图没法渲染啊,你们是怎么解决的? @Vanessa @88250

88250 • 2019-02-16
回复 删除

这部分是在前端做的,后端 Markdown 只会渲染为代码块。

q2484877 • 2019-02-16
回复 删除

能告知渲染代码在哪吗?实在是找不到😂