# Props
# text
- type：
String
Need to parse markdown string。
WARNING
Only preview component support
# v-model
- type：
String
WARNING
Only editing components support this property.
# mode
- type：
String - default:
editable
Optional value：edit editable preview。
# height
- type：
String - default：
''
# tab-size
- type：
Number - default：
2
The length of the tab character when editing and previewing. Both the editor and preview components support this property.
# toc-nav-position-right
- type：
Boolean - default：
false
Whether the directory navigation is on the right.
# default-show-toc
- type：
Boolean - default：
false
Whether to show toc by default.
# placeholder
- type：
String
# autofocus
- type：
Boolean - default：
false
# default-fullscreen
- type：
Boolean - default：
false
Whether to enable full screen by default.
# include-level
- type:
Array - default:
[2, 3]
The title included when the directory navigation is generated. By default, it includes level 2 and level 3 titles.
# left-toolbar
- type：
String - default：
undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save
| 名称 | 说明 |
|---|---|
| undo | undo |
| redo | redo |
| clear | clear |
| h | headings |
| bold | bold |
| italic | italic |
| strikethrough | strikethrough |
| quote | quote |
| ul | ul |
| ol | ol |
| table | table |
| hr | hr |
| link | link |
| image | demo |
| code | code |
| save | Trigger save event after clicking |
# right-toolbar
- type：
String - default：
preview toc sync-scroll fullscreen
# toolbar
- type：
Object - default：
{}
example:
<template>
<v-md-editor left-toolbar="undo redo | customToolbar" :toolbar="toolbar" />
</template>
<script>
export default {
data() {
return {
toolbar: {
customToolbar: {
icon: 'icon class',
title: 'title',
action(editor) {},
},
},
};
},
};
</script>
demo：Custom Toolbar
# toolbar-config
- type：
Object - default：
{}
Some configuration of the built-in toolbar.
Optional:
{
'image-link': {
// Whether to bring the width and height attribute by default when inserting the image link
insertWithSize: false
}
}
# disabled-menus
- type：
Object - default：
['image/upload-image']
Disabled menu. default is the upload local image menu under the image toolbar. Example: h/h1 (disable the h1 title menu under the title toolbar).
# upload-image-config
- type：
Object - default：
{ accept: 'image/*' }
# before-preview-change
- type:
Function - default value:
- - callback parameters:
(text, next)
Function triggered before preview parsing. After configuring this property, you must call the next method and pass in the md text that needs to be rendered, otherwise the preview component will not be rendered.
# codemirror-config
- type：
Object - default：
{}
new Codemirror(this.$refs.codemirrorEditor, {
tabSize: 2,
lineNumbers: true,
styleActiveLine: true,
value: this.text,
mode: 'markdown',
lineWrapping: 'wrap',
scrollbarStyle: 'overlay',
dragDrop: false,
...this.codemirrorConfig,
});
# codemirror-style-reset
- type：
Boolean - default：
true
Whether to optimize some styles of the codemirror editor. If closed, the default style of the codemirror editor will be restored.
# Methods
# focus
# insert
- params：
(getInsertContent: Function)
Insert text into the editor.
editor.insert((selected) => {
const prefix = '**';
const suffix = '**';
const content = selected || '粗体';
return {
text: `${prefix}${content}${suffix}`,
selected: content,
};
});
demo：Custom toolbar
# Events
# change
- Callback parameter：
(text, html)
Event triggered when the content changes. text is the input content, and html is the html string after parsing.
# blur
-Callback parameters: (event)
Fires when the editor loses focus.
# save
- Callback parameter：
(text, html)
Event triggered when click save toolbar.
# image-click
- Callback parameter：
(images, currentIndex)
Event triggered when the picture is clicked.
# fullscreen-change
- Callback parameter：
(isFullscreen)
Event triggered when switching to full screen state.
# upload-image
- Callback parameter：
(event, insertImage)
After using the upload image in the toolbar, the event will be triggered when the user triggers the image upload action (for example: select the image to upload, drag the image into the editor, and paste the screenshot into the editor).
demo：Upload Image