vue-markdown/docs/props.md

3.2 KiB
Raw Blame History

编辑器基本属性

value

  • Type: String/Number
  • Default: ''

编辑器输入的文本,支持通过v-dodel数据双向绑定设置编辑器内容和获取编辑器的值。

width

  • Type: String/Number
  • Default: auto

编辑器的初始化宽度。

height

  • Type: Number
  • Default: 600

编辑器的初始化高度。

bordered

  • Type: Boolean
  • Default: true

编辑器是否含有边框。

toolbars

  • Type: Object
  • Default: 参见下表

头部菜单按钮通过设置true or false控制决定是否显示目前配置支持持控制按钮显示隐藏后续将支持根据配置显示排列顺序。

名称 说明 默认是否显示
strong 粗体
italic 斜体
overline 删除线
h1 标题1
h2 标题2
h3 标题3
h4 标题4
h5 标题5
h6 标题6
hr 分割线
quote 引用
ul 无序列表
ol 有序列表
code 代码块
link 链接
image image
table 表格
checked 已完成列表
notChecked 未完成列表
preview 预览
split 分屏模式切换
print 打印
theme 主题切换
fullscreen 全屏
exportmd 导出为*.md文件
importmd 导入本地*.md文件
save 保存按钮
clear 清空内容

theme

  • Type: String
  • Default: light

编辑器代码块主题,目前支持lightdarkoneDarkgitHub四种代码块风格可通过自定义theme并修改样式文件进行主题定制。

自定义theme时预览区域的会增加一个为markdown-theme-[theme]class

autoSave

  • Type: Boolean
  • Default: false

是否开启自动保存,设置为开启时可通过绑定on-save事件获取编辑器内的值和代码块主题。

<Markdown @on-save="handleOnSave"/>
 handleOnSave({value, theme}){
        console.log(value, theme);
    }

interval

  • Type: Number
  • Default: 10000

自动保存间隔时间,单位:mm默认10000mm需要autoSave = true时才有效。

exportFileName

  • Type: String
  • Default: unnamed

导出的md文件名称默认unnamed.md。

markedOptions

  • Type: Object
  • Default: {}

marked配置项,可以根据需求自定义。

<Markdown :markedOptions="{baseUrl:'http://***.oss-cn-shanghai.aliyuncs.com/'}"/>

isPreview

  • Type: Boolean
  • Default: false

是否是预览模式,开启时可作为一个预览组件使用,与预览组件功能一致。

copyCode

  • Type: Boolean
  • Default: true

是否支持复制代码块内的内容。

copyBtnText

  • Type: String
  • Default: 复制代码

复制代码按钮显示文字。

预览组件基本属性

initialValue

  • Type: String/Number
  • Default: ''

预览组件初始化内容,支持动态更新。

theme

  • Type: String
  • Default: light

代码块主题,与编辑器编辑器代码块主题一致。

markedOptions

  • Type: Object
  • Default: {}

marked配置项,与编辑器内该配置一致。

copyCode

  • Type: Boolean
  • Default: true

是否支持复制代码块内的内容。

copyBtnText

  • Type: String
  • Default: 复制代码

复制代码按钮显示文字。