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

秒速五厘米 2022-04-10 01:37 643阅读 0赞

vue2-editor的入门使用  
准备工作： 使用 npm install vue2-editor --save 安装到项目中去；[在Vue2.0中集成UEditor 富文本编辑器][Vue2.0_UEditor]

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_www.vue2editor.com_ex...]  
[https://github.com/davidroyer...][https_github.com_davidroyer...]

来源：[https://segmentfault.com/a/1190000017418098][https_segmentfault.com_a_1190000017418098]

[Vue2.0_UEditor]: http://www.jqhtml.com/20613.html
[https_www.vue2editor.com_ex...]: https://www.vue2editor.com/examples/#basic-setup
[https_github.com_davidroyer...]: https://github.com/davidroyer/vue2-editor
[https_segmentfault.com_a_1190000017418098]: https://segmentfault.com/a/1190000017418098