vue2-editor富文本基础使用方法

2024年1月27日 174次阅读 来源: LazyHua

vue2-editor的入门使用
准备工作： 使用 npm install vue2-editor –save 安装到项目中去；

  1. 使用

在需要的单文件内引入 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' }]
        ],
    }
}
  1. 具体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…

    原文作者：LazyHua
    原文地址: https://segmentfault.com/a/1190000017418098
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞