vue2.x 富文本编辑器Tinymce的使用

VUE项目版本是2.x，切记： vue2中不能使用@tinymce/tinymce-vue为4以上版本；
如果有安装高版本，卸载：npm uninstall @tinymce/tinymce-vue
第一步：安装

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

第二步：配置文件

找到 node_modules 下的 tinymce 将其目录下的 skins, themes 复制到 static/tinymce文件路径下，这里的langs是我自己加的汉化语言包，
语言包下载地址：Language Packages | Trusted Rich Text Editor | TinyMCE
在这里插入图片描述
第三步：组件封装TinymceText.vue
文件路径：src/components/TinymceText.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/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
    
    
  components: {
    
    
    Editor
  },
  props: {
    
    
    //传入一个value，使组件支持v-model绑定
    value: {
    
    
      type: String,
      default: ''
    },
    disabled: {
    
    
      type: Boolean,
      default: false
    },
    plugins: {
    
    
      type: [String, Array],
      default:
        // ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists   noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        'lists image media table  wordcount '
    },
    toolbar: {
    
    
      type: [String, Array],
      default:
        // 'undo redo | searchreplace | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent  blockquote  removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table  forecolor backcolor'
        'undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr'
    }
  },
  data () {
    
    
    return {
    
    
      //初始化配置
      init: {
    
    
        language_url: '../static/tinymce/langs/zh-Hans.js', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        language: 'zh_CN',
        skin_url: '../static/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        height: 300,
        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_handler: (blobInfo, success, failure) => {
    
    
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
          console.log('failure', failure)
        },
        resize: false
      },
      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>

注意：这里的路径一定要写正确，不然会页面不出富文本效果且控制台会报错

 init: {
    
    
        language_url: '../static/tinymce/langs/zh-Hans.js', // 根据自己文件的位置，填写正确的路径。路径不对会报错
        language: 'zh_CN',
        skin_url: '../static/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错

第四步：组件使用TextEditor.vue
文件路径： src/views/TextEditor.vue

<template>
  <div>
    <h1>富文本编辑器</h1>
    <Tinymce class="setTinymce" :height="200" v-model="value"></Tinymce>
  </div>
</template>
 
<script>
import Tinymce from "@/components/TinymceText.vue";

export default {
    
    
  data() {
    
    
    return {
    
    
      value:''
    };
  },
  components: {
    
    
    Tinymce,
  },
};
</script>

最后，看效果：
文字效果可以根据需求自己在封装的富文本组件TinymceText.vue中添加；
在这里插入图片描述
最开始配置时，出现各种报错，总结下来两种情况：
1、tinymce版本安装太高，这种配置是VUE2.x的配置方法；
2、这里的文件路径不对： language_url: ‘…/static/tinymce/langs/zh-Hans.js’,
skin_url: ‘…/static/tinymce/skins/ui/oxide’,

遇到问题，耐心一点点去解决！！

参考文章：
https://blog.csdn.net/xiaomanonyo/article/details/123177405?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2%E4%B8%AD%E4%BD%BF%E7%94%A8tinymce&utm_medium=distribute.pc_search_result.none-task-blog-2_blogsobaiduweb~default-6-123177405.article_score_rank_blog&spm=1018.2226.3001.4450

vue2.x 富文本编辑器Tinymce的使用

猜你喜欢