记录使用tinymce编辑器

示例

<template>
  <div id="app">
    <Editor
      style="width:100%"
      id="keyinfo-tinymce"
      :init="init"
      v-model="keyinfo"
    ></Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'
import '../../../../public/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
export default {
  data () {
    return {
      keyinfo: '',
      init: {
        language_url: '/tinymce4.7.5/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce4.7.5/skins/lightgray',
        height: 200,
        placeholder: '在这里输入文字',
        plugins:
          'link lists image code table colorpicker textcolor wordcount contextmenu preview',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | preview',
        branding: false,
        images_upload_handler: function (blobInfo, success, failure) {
          var formData = new FormData()
          formData.append('file', blobInfo.blob())
          formData.append('bucketName', 'scp')
          formData.append(
            'folderName',
            'notice/' +
              date.getFullYear() +
              '/' +
              Number(date.getMonth() + 1) +
              '/' +
              date.getDate()
          )
          console.log(blobInfo)
          console.log(formData)
        }
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {}
}
</script>

<style scoped lang="scss"></style>