thoth-frontend-test/src/components/input/normalArea.vue

<template>
  <div>
    <article :id="id">
      <editor v-model="inputValue" :class="'tinymce_'+id" :init="init" @input="changeText" />
    </article>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'

export default {
  components: {
    Editor
  },
  props: {
    id: {
      type: String,
      default: '',
      required: true
    },
    value: {
      type: String,
      default: '',
      required: false
    },
    height: {
      type: Number,
      default: 200,
      required: false
    }
  },
  data() {
    return {
      inputValue: '',
      edit: false,
      init: {
        auto_focus: true,
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
        height: this.height,
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        menubar: false, // 隐藏最上方menu
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        file_picker_types: 'image',
        images_upload_credentials: true,
        plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
      }
    }
  },
  watch: {
    value: {
      handler(newV, oldV) {
        console.log(newV)
        this.inputValue = newV
      },
      immediate: true
    }
  },
  mounted() {
    tinymce.init({ selector: `.tinymce_${this.id}` })
  },
  methods: {
    changeText(e) { // 富文本内容改变
      this.inputValue = e
      this.$emit('update:value', this.inputValue)
      this.$emit('change', this.inputValue)
    }
  }
}
</script>