共计 794 个字符，预计需要花费 2 分钟才能阅读完成。
vue2-editor 的入门使用准备工作：使用 npm install vue2-editor –save 安装到项目中去；
使用
在需要的单文件内引入 import {VueEditor} from ‘vue2-editor’, 注册组件
components: {VueEditor},
<vue-editor v-model=”content” :editorToolbar=”customToolbar”>
</vue-editor>
data() {
return {
content: ”,
customToolbar: [
[‘bold’, ‘italic’, ‘underline’],
[{‘list’: ‘ordered’}, {‘list’: ‘bullet’}],
[{‘indent’: ‘-“”‘}, {‘indent’: ‘+””‘}],
[{‘header’: ‘2’}], [‘clean’], [{‘align’: ‘center’}, {‘align’: ‘justify’}, {‘align’: ‘right’}]
],
}
}
具体 demo
<template>
<div id=”app”>
<vue-editor v-model=”content”></vue-editor>
</div>
</template>
<script>
import {VueEditor} from “vue2-editor”;
export default {
components: {
VueEditor
},
data() {
return {
content: “<h1>Some initial content</h1>”
};
}
};
</script>
注意事项：
对于这个上面的 customToolbar 的修改，有的内容不需要，可以通过鼠标拾取来定义，显示的内容参考文档：https://www.vue2editor.com/ex…https://github.com/davidroyer…
