vue 配置 TinyMCE

1、index.html 增加cdn 地址

2、组件目录创建编辑器的组件

　　cd components

　　touch tinymce-editor.vue

　　创建内容：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<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>