vue 配置 TinyMCE

1、index.html 增加cdn 地址

　　<script src="//cdn.bootcss.com/tinymce/5.0.16/tinymce.min.js"></script>

2、組件目錄創建編輯器的組件

　　cd components

　　touch tinymce-editor.vue

　　創建內容：

　　

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'

export default {
  components: {
    Editor
  },
  props: {
    //傳入一個value，使組件支持v-model綁定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media wordcount advlist bbcode code charmap emoticons insertdatetime preview'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo | fontselect fontsizeselect bold italic | forecolor backcolor | superscript subscript charmap insertdatetime emoticons| lists image media | numlist | preview code removeformat | alignleft aligncenter alignright alignjustify | bullist outdent indent'
    }
  },
  data() {
    return {
      //初始化配置
      init: {
        // language_url: '/static/tinymce/langs/zh_CN.js',
        // language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 150,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        //此處為圖片上傳處理函數，這個直接用了base64的圖片形式上傳圖片，
        //如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        //images_upload_url:"/common/uploadImg",
        images_upload_handler: function (blobInfo, succFun, failFun) {
        var xhr, formData;
        var file = blobInfo.blob();//轉化為易於理解的file對象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/common/uploadImg');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failFun('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.data.urlExt != 'string') {
                failFun('Invalid JSON: ' + xhr.responseText);
                return;
            }
            succFun(json.data.urlExt);
        };
        formData = new FormData();
        formData.append('file', file, file.name );//此處與源文檔不一樣
        xhr.send(formData);
        },
        file_picker_types: 'file image media',
        file_picker_callback: function(callback, value, meta) {
          // Provide file and text for the link dialog
          //要先模擬出一個input用於上傳本地文件
          var input = document.createElement('input');
              input.setAttribute('type', 'file');
              //你可以給input加accept屬性來限制上傳的文件類型
              //例如：input.setAttribute('accept', '.jpg,.png');
          input.click();
          input.onchange = function() {
              var file = this.files[0];

              var xhr, formData;
              console.log(file.name);
              xhr = new XMLHttpRequest();
              xhr.withCredentials = false;
              xhr.open('POST', '/common/uploadImg');
              xhr.onload = function() {
                  var json;
                  if (xhr.status != 200) {
                      failure('HTTP Error: ' + xhr.status);
                      return;
                  }
                  json = JSON.parse(xhr.responseText);
                  if (!json || typeof json.data.urlExt != 'string') {
                      failure('Invalid JSON: ' + xhr.responseText);
                      return;
                  }
                  callback(json.data.urlExt);
              };
              formData = new FormData();
              formData.append('file', file, file.name );
              xhr.send(formData);
          }
        }
      },
      myValue: this.value
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    //添加相關的事件，可用的事件參照文檔=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    //可以添加一些自己的自定義事件，如清空內容
    clear() {
      this.myValue = ''
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  }
}

</script>
<style scoped>
</style>

　　　1.上面我注釋了中文插件包，需要的可以自己下載。

　　　2. skin_url 定義為自己的目錄路徑地址，網上很多的做法是node install 之后，把css目錄復制到項目中

　　　3.上傳文件/圖片/媒體，注意返回的json 格式，里面要替換為你自己的格式。

3、使用組件。

　　index.vue:

　　

<template>
<tinymce-editor v-model="myValue"
@onClick="onClick"
ref="editor"></tinymce-editor>
</template>
<script>
import TinymceEditor from '../../components/tinymce-editor'
　　export default {
　　　　//引用組件
　　　　components: { TinymceEditor },
　　　　methods: {　　
　　　　　　onClick(e, editor) {
　　　　　　　　// console.log('Element clicked')
　　　　　　　　// console.log(e)
　　　　　　　　// console.log(editor)
　　　　　　},
　　　　　　clear() {
　　　　　　　　this.$refs.editor.clear()
　　　　　　}
 　　　　}
　　}
</script>

　　是不是很簡單？有問題可以留言找我