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

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

使用

在需要的单文件内引入 import { VueEditor } from 'vue2-editor',
注册组件



components: {  VueEditor },

&lt;vue-editor v-model="content" :editorToolbar="customToolbar"&gt;

&lt;/vue-editor&gt;

data() {

    return {

        content: '',

        customToolbar: [

            ['bold', 'italic', 'underline'],

            [{ 'list': 'ordered' }, { 'list': 'bullet' }],

            [{ 'indent': '-""' }, { 'indent': '+""' }],

            [{ 'header': '2' }], ['clean'], [{ 'align': 'center' }, { 'align': 'justify' }, { 'align': 'right' }]

        ],

    }

}

具体demo



&lt;template&gt;

   &lt;div id="app"&gt;

     &lt;vue-editor v-model="content"&gt;&lt;/vue-editor&gt;

   &lt;/div&gt;

 &lt;/template&gt;

 &lt;script&gt;

import { VueEditor } from "vue2-editor";

export default {

  components: {

    VueEditor

  },

  data() {

    return {

      content: "&lt;h1&gt;Some initial content&lt;/h1&gt;"

    };

  }

};

&lt;/script&gt;

注意事项：

对于这个上面的customToolbar的修改，有的内容不需要，可以通过鼠标拾取来定义，显示的内容
参考文档：
https://www.vue2editor.com/ex...
https://github.com/davidroyer...

来源：https://segmentfault.com/a/1190000017418098

巴特西

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

最新文章

热门文章