Markdown Editor v3.9.3+
laravue uses tui.editor as the markdown editor. All the next documents are based on tui.editor. More Content.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | String | " " | This prop can change content of the editor. If you using v-model, don't use it. |
| options | Object | following defaultOptions | Options of tui.editor. This is for initailize tui.editor. |
| height | String | '300px' | This prop can control the height of the editor. |
| mode | String | 'markdown' | This prop can change mode of the editor. (markdownor wysiwyg) |
| language | String | 'en_US' | i18n |
const defaultOptions = {
minHeight: '200px',
previewStyle: 'vertical',
useCommandShortcut: true,
useDefaultHTMLSanitizer: true,
usageStatistics: false,
hideModeSwitch: false,
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'hr',
'quote',
'divider',
'ul',
'ol',
'task',
'indent',
'outdent',
'divider',
'table',
'image',
'link',
'divider',
'code',
'codeblock',
],
}
Methods
- setValue
- getValue
- setHtml
- getHtml
Example
<template>
<markdown-editor v-model="content" />
</template>
<script>
import MarkdownEditor from '@/components/MarkdownEditor';
export default {
data() {
return {
content: '',
}
}
}
</script>