Start CommonJS 安装依赖 npm install vditor --save 在代码中引入并初始化对象,可参考 [链接] import Vditor from 'vditor' import '~vditor/src/assets/scss/classic' // 或者使用 dark const vdit ..

Vditor 使用指南

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

<!-- ⚠️生产环境请指定版本号,如 https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<!-- 可使用 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" defer></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 -
editorName 设置编辑器中的 textarea name -
tab tab 键操作字符串,支持 \t 及任意字符串 -

options.toolbar

{
      name: 'download',
      tipPosition: 'nw',
      tip: '下载',
      icon: '<svg t="1566271629641" class="icon" viewBox="0 0 1092 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1960" xmlns:xlink="http://www.w3.org/1999/xlink" width="34.125" height="32"><defs><style type="text/css"></style></defs><path d="M1044.753067 902.3488H47.5136a47.5136 47.5136 0 0 0 0 94.890667h997.239467a45.806933 45.806933 0 0 0 33.5872-13.858134 47.5136 47.5136 0 0 0-33.5872-81.032533z m-522.4448-103.970133a33.450667 33.450667 0 0 0 23.825066 8.874666 33.450667 33.450667 0 0 0 23.825067-8.874666l302.2848-290.952534c7.509333-7.236267 8.874667-16.452267 3.6864-24.7808-5.188267-8.3968-32.768-7.714133-44.8512-7.714133h-118.784V47.5136c0-25.941333-13.789867-47.5136-47.445333-47.5136H427.4176c-33.655467 0-47.5136 21.572267-47.5136 47.5136v427.349333H237.431467c-12.014933 0-15.906133-0.6144-21.162667 7.7824-5.188267 8.328533-3.754667 17.544533 3.6864 24.7808l302.421333 290.952534z" p-id="1961"></path></svg>',
      click:
        () => {
          alert('download')
        },
    }
说明 默认值
name 唯一标示 -
icon svg 图标 -
tip 提示 -
tipPosition 提示位置:ne, nw -
hotkey 快捷键,支持 ⌘/ctrl-key⌘/ctrl-⇧/shif-key 格式的配置 -
suffix 插入编辑器中的后缀 -
prefix 插入编辑器中的前缀 -
click 自定义按钮点击时触发的事件 ():viod -

options.preview

说明 默认值
delay 预览 debounce 毫秒间隔 1000
mode 显示模式:'both', 'editor', 'preview' 'both'
parse 预览回调 (element: HTMLElement): void -
url md 解析请求 -

options.preview.hljs

说明 默认值
enable 是否启用代码高亮 true
style highlight.js 样式文件名 'atom-one-light'

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

内置上传的返回格式如下
⚠️ filename 需和文件名安全处理后的结果保持一致

{
    "msg": "",
    "code": 0,
    "data": {
        "errFiles": ['filename', 'filename2'],
        "succMap": {
            "filename3": "filepath3",
            "filename3": "filepath3"
        }
    }
}
说明 默认值
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, '')
accept 文件上传类型,同 input accept -
validate 校验,成功时返回 true 否则返回错误信息 (files: File[]) => string | boolean -
handler 自定义上传,当发生错误时返回错误信息 (files: File[]) => string | null -

options.resize

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

options.classes

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

options.hotkey

说明 默认值
deleteLine 删除光标所在行或选中的行 ⌘-Backspace
duplicate 复制当前行或选中的内容 ⌘-d

methods

说明
getValue() 获取编辑器内容
getHTML(includeHljs?: boolean) 获取预览区内容(是否输出代码高亮)。该方法需使用异步编程
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() 启用缓存
html2md(value: string) html 转 md。该方法需使用异步编程
tip(text:string, time:number) 消息提示。time 为 0 将一直显示
setPreviewMode(mode: string) 设置预览模式。mode: 'both', 'editor', 'preview'

static methods

如不需要使用编辑器时,可如下单独进行使用

import Vditor from 'vditor/dist/method.min'
Vditor.mermaidRender(document)
说明
mathRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") 转换 element 中的文本为数学公式
mermaidRender(element: HTMLElement) 转换 element 中的文本为流程图 / 时序图 / 甘特图
codeRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") 为 element 中的代码块添加复制按钮
chartRender(element: (HTMLElement | Document) = document) 图表渲染
abcRender(element: (HTMLElement | Document) = document) 五线谱渲染
md2html(md: string, hljsStyle: style) markdown 文本转换为 html

CSS

在 DOM 元素上添加 class="vditor-reset" 属性可对内容进行更为友好的展示。

Dev

升级

CHANGELOG

开发步骤

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

注意事项

展开
  • Vditor

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

    24 引用 • 209 回帖 • 17 关注
  • B3log

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

    1873 引用 • 3624 回帖 • 586 关注
  • 开发指南
    5 引用 • 164 回帖
       
1 操作
Vanessa 在 2019-06-19 15:47:05 更新了该帖
优质回帖
  • Vanessa      

    前端是这样传送的

        const formData = new FormData();
        for (let i = 0, iMax = uploadFileList.length; i < iMax; i++) {
            formData.append("file[]", uploadFileList[i]);
        }
         xhr.send(formData);
    
64 回帖   
请输入回帖内容...