1、下载本地包放到静态文件目录

2、在index.html中引入

 

 3、使用:

<template>
  <div class="tinymce-container" >
    <textarea :id="tinymceId" class="tinymce-textarea"/>
  </div>
</template>

<script>
//  一些插件的引入需要对写好相对路径  防止上线之后找不到
export default {
data(){
 return {
    tinymceId:'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''),
    value:''
  }
},
mounted() {
   this.initTinymce()
},
created() {
  this.initTinymce()
},
methods: {
 initTinymce() {
      const _this = this
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        branding: false,
        //语言包的路径   --  需要自己下载放到对应的位置
        language_url:"/tinymce/js/tinymce/langs/zh_CN.js",
        language: 'zh_CN',
        height: 550,
        browser_spellcheck: true, // 拼写检查
        body_class: 'panel-body editor-content',
        object_resizing: false,
        toolbar: ['fullpage newdocument undo redo | textpattern template pastetext selectall| forecolor backcolor bold italic underline | strikethrough anchor |ltr rtl | alignleft aligncenter alignright alignjustify indent2em lineheight \
            blockquote subscript superscript removeformat | styleselect formatselect | fontselect fontsizeselect | table image media link charmap emoticons hr pagebreak insertdatetime print preview | fullscreen '],
        plugins:['print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave quickbars'],
        font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', //字体
        file_picker_types: 'image',
        paste_data_images: true, // 是否允许粘贴图像
        images_upload_credentials: true,
        // 初始化结束后执行
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
            console.log(_this.value);
          }
          _this.hasInit = true
          editor.on('KeyUp', () => {
            _this.hasChange = true
            _this.$emit('input', editor.getContent())
            //_this.form.content = editor.getContent()  //赋值操作,
          })
        },
        images_upload_handler: function(blobInfo, success, failure) {
          let formdata = new FormData();
          formdata.append("file", blobInfo.blob());
          // 上传图片接口
          // http://xxx.xxxx.cn/admin/upload  上传图片
          // axios.post('http://xxx.xxxx.cn/admin/upload',formdata)
          // .then(function(res) {
          //   success(res.data.data.src);
          // }).catch(res => {
          //     failure("error");
          //   });
          //此处为自己引入的上传图片的方法
          uploadImg(formdata).then(res =>{
              success(res.fileName);
          }).catch(res => {
              failure("error");
          });
        }
      })
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value)
    },
    getContent() {
      return window.tinymce.get(this.tinymceId).getContent()
    },
}
</script>

Logo

前往低代码交流专区

更多推荐