点击展开正文内容

Start

CommonJS

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

HTML script

  • 在 HTML 中插入 css 和 js
    <!-- 可使用 index.dark.css 或 index.classic.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.classic.css" />
    <script src="https://cdn.jsdelivr.net/npm/vditor/dist/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 常用表情提示 -
emojiPath 表情图片地址 https://cdn.jsdelivr.net/npm/vditor/src/assets/emoji
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: string): string 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 目录

注意事项:

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。

    3 引用 • 46 回帖 • 7 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    2764 引用 • 4346 回帖 • 640 关注
  • 开发指南
    3 引用 • 92 回帖
感谢    关注    收藏    赞同    反对    举报    分享