vue 配置 TinyMCE

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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>

　　是不是很简单？有问题可以留言找我

以上是 vue 配置 TinyMCE 的全部内容， 来源链接： utcz.com/z/379000.html

回到顶部