内容简介：☞☞☞
Vue Markdown Editor component for Vue.js
☞ Vue.JS Tutorial: Learn Vue.js from Scratch
☞ Javascript Tutorial for Absolute Beginners
Demo
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);
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>
<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>
<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>
<markdown-editor toolbar="bold italic heading | image link | numlist bullist code quote | preview fullscreen"></markdown-editor>
</div>
</template>
add custom button
<template>
<div>
<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>
<markdown-editor ref="md"></markdown-editor>
<button @click="replace">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>
以上所述就是小编给大家介绍的《Markdown Editor component for Vue.js》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
