This is a fork of the original project
This fork adds the possibility to use any custom component as a toolbar button. For example, we can obtain a customized toolbar like the one below:
by using a toolbar config like this:
const customToolbar = {
myButton: {
title: 'Options',
slot: true, // this tells the editor to render the button using our custom template
preventNativeClick: false, // this allows elements like a select to work correctly
},
my2ndButton: {
title: 'Settings',
slot: true,
action() {
// you can still define the onClick action via the usual function
console.log('opening the settings..');
},
},
};Then we can provide custom templates for myButton and my2ndButton, like this:
<v-md-editor
v-model="text"
height="500px"
:toolbar="customToolbar"
left-toolbar="undo redo | myButton my2ndButton"
>
<template #myButton>
<select name="opts">
<option value="opt1">
option 1
</option>
<option value="opt2">
option 2
</option>
</select>
</template>
<template #my2ndButton>
<img
src="https://www.svgrepo.com/show/131974/settings.svg"
intrinsicsize="512 x 512"
width="16"
height="16"
srcset="https://www.svgrepo.com/show/131974/settings.svg 4x"
alt="Settings SVG Vector"
>
</template>
</v-md-editor>qq group: 798884474
# Vue 2 use npm
npm i @kangc/v-md-editor -S
# Vue 2 use yarn
yarn add @kangc/v-md-editor
# Vue 3 use npm
npm i @kangc/v-md-editor@next -S
# Vue 3 use yarn
yarn add @kangc/v-md-editor@nextimport Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
Vue.use(VueMarkdownEditor);import { createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';
VMdEditor.use(vuepressTheme, {
Prism,
});
const app = createApp(/*...*/);
app.use(VMdEditor);<template>
<v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
};
</script><template>
<v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const text = ref('');
return {
text,
};
},
};
</script>Paypal
Alipay 支付宝
WeChat Pay 微信
