封装froala-edtior组件

柔情只为你懂 2021-09-19 12:00 319阅读 0赞

### npm引入froala-editor ###

npm install vue-froala-wysiwyg --save

### main.js导入js ###

//Import Froala Editor 
    import 'froala-editor/js/plugins.pkgd.min.js';
    //Import languages 中文语言包
    import 'froala-editor/js/languages/zh_cn';
    // Import Froala Editor css files.
    import 'froala-editor/css/froala_editor.pkgd.min.css';
    
    // Import and use Vue Froala lib.
    import VueFroala from 'vue-froala-wysiwyg'
    
    Vue.use(VueFroala)

### Editor组件 ###

@/components/Editor/index.vue

<template>
      <froala v-model="content" :config="froalaConfig" />
    </template>
    
    <script>
    export default {
      name: 'Editor',
      props: {
        value: {
          type: String,
          default: ''
        }
      },
      data() {
        return {
          froalaConfig: {
            placeholder: '请填写内容',
            language: 'zh_cn', // 国际化
            toolbarButtons: [
              'html',
              'selectAll',
              'fontSize',
              'fontFamily',
              'textColor',
              'bold',
              'italic',
              'underline',
              'align',
              'insertLink',
              'insertImage',
              'clearFormatting',
              'insertTable',
              'undo'
            ],
            height: '450px',
            imageDefaultAlign: 'left',
            imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
            imageUploadURL: '/dev-api/api/editor/editor-upload', // 图片上传api
            quickInsertEnabled: false,
            colorsHEXInput: false, // 关闭16进制色值
            toolbarSticky: false, // 操作栏是否自动吸顶
            attribution: false,
            linkList: [],
            fontSize: [
              '12',
              '14',
              '16',
              '18',
              '20',
              '22',
              '24',
              '26',
              '28',
              '30',
              '50',
              '60'
            ]
          }
        }
      },
      computed: {
        content: {
          get() {
            return this.value
          },
          set(val) {
            this.$emit('content-change', val)
          }
        }
      }
    }
    </script>

### 父组件调用编辑器 ###

<editor ref="editor" v-model="form.content" @content-change="contentChange" />
    
    <script>
    import Editor from "@/components/Editor";
    export default {
      components: { Editor },
      data() {
        return  {
          form: {}
          ...
        }
      },
      methods: {
       contentChange(val) {
          // 编辑器内容改变时，改变父组件的内容
          this.form.content = val
        },
       ...
      }
    }
    </script>