v-markdown编辑器 (v-markdown-editor)
Vue Markdown Editor component for Vue.js.
Vue.js的Vue Markdown编辑器组件。
安装 (Install)
npm install v-markdown-editor
import 'v-markdown-editor/dist/v-markdown-editor.css';
import Vue from 'vue'
import Editor from 'v-markdown-editor'
// global register
Vue.use(Editor);
使用CDN (Use CDN)
<link href="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.css" rel="stylesheet">
<script src="https://unpkg.com/v-markdown-editor/dist/v-markdown-editor.min.js" type="text/javascript"></script>
更改 (Change)
1.2.0
- Support Fontawsome & Material Design Icons
- Remove jQuery
例 (Example)
<template>
<div class="container">
<markdown-editor :options="options"></markdown-editor>
</div>
</template>
<script>
export default {
data() {
return {
// default options, see more options at: http://codemirror.net/doc/manual.html#config
options: {
// lineNumbers: true,
// styleActiveLine: true,
// styleSelectedText: true,
// lineWrapping: true,
// indentWithTabs: true,
// tabSize: 2,
// indentUnit: 2
}
}
}
}
</script>
模型 (v-model)
<template>
<div class="container">
<markdown-editor v-model="value"></markdown-editor>
</div>
</template>
<script>
export default {
data() {
return {
value: 'Hello world!'
}
}
}
</script>
工具列 (Toolbar)
// full toolbar: clipboard redo undo | bold italic strikethrough heading | image link | numlist bullist code quote | preview fullscreen
<template>
<div class="container">
<markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor>
</div>
</template>
添加自定义按钮 (add custom button)
<template>
<div class="container">
<markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen | upload" :extend="custom"></markdown-editor>
</div>
</template>
<script>
export default {
data() {
return {
custom: {
'upload': {
cmd: 'upload',
ico: 'fas fa-upload',
title: 'Upload File'
}
}
}
},
created() {
this.$root.$on('markdown-editor:upload', function (md) {
md.drawImage({url:'https://i.imgur.com/CbCXhBe.png', title:'this image title'});
});
}
}
</script>
手柄编辑器 (Handle editor)
<template>
<div class="container">
<markdown-editor ref="md"></markdown-editor>
<button @click="replace" class="btn btn-primary">Handle</button>
</div>
</template>
<script>
export default {
methods: {
replace(){
// more info: https://codemirror.net/doc/manual.html#api
this.$refs.md.editor.replaceSelection("Handle editor");
}
},
}
</script>
自动调整大小 (Auto resize)
<markdown-editor height="auto"></markdown-editor>
按钮主题 (Button Theme)
<markdown-editor theme="primary"></markdown-editor>
翻译自: https://vuejsexamples.com/vue-markdown-editor-component-for-vue-js/