vuecli3.x中輕鬆4步帶你使用tinymce

前言

筆者在使用tinymce時發現跟着網上的方法去作，基本都會由於版本等一些問題報錯，因此筆者總結了如下方案！能夠收藏哦

第一步:

npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S

第二步:

找到node_modules中的skins文件夾，而後在項目中的public下新建tinymce文件夾，而後將剛剛找到的整個skins文件夾拷貝到public的tinymce目錄下。

接着去官網下載語言包，解壓，將langs文件夾拷貝到public的tinymce文件夾下(和skins文件夾同級)

第三步:

在components文件夾下新建tinymce組件的文件夾，新建index.vue文件，複製如下代碼進去:

<template>
 <div class="tinymce-editor">  <Editor  :id="editorId"  v-model="editorValue"  :init="editorInit"  />  </div> </template>  <script> // 引入組件 import tinymce from 'tinymce/tinymce'; import Editor from '@tinymce/tinymce-vue'; import 'tinymce/icons/default/icons'; import 'tinymce/themes/silver'; // 引入富文本編輯器主題的js和css import 'tinymce/themes/silver/theme.min'; import 'tinymce/skins/ui/oxide/skin.min.css'; // 擴展插件 import 'tinymce/plugins/image'; import 'tinymce/plugins/link'; import 'tinymce/plugins/code'; import 'tinymce/plugins/table'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/wordcount'; // 字數統計插件 import 'tinymce/plugins/media';// 插入視頻插件 import 'tinymce/plugins/template';// 模板插件 import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/paste'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/contextmenu'; import 'tinymce/plugins/textcolor'; export default {  name: 'TinymceEditor',  components: {Editor},  props: {  height: {  type: Number,  default: 500  },  id: {  type: String,  default: 'tinymceEditor'  },  value: {  type: String,  default: ''  },  plugins: {  type: [String, Array],  default: 'link lists image code table wordcount media fullscreen preview paste contextmenu textcolor'  },  toolbar: {  type: [String, Array],  default: 'fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat'  }  },  data() {  return {  editorInit: {  language_url: `${window.baseUrl}/tinymce/langs/zh_CN.js`,  language: 'zh_CN',  skin_url: `${window.baseUrl}/tinymce/skins/ui/oxide`,  content_css: `${window.baseUrl}/tinymce/skins/content/default/content.css`,  height: this.height,  content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',  plugin_preview_width: 375, // 預覽寬度  plugin_preview_height: 668,  lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",  fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",  font_formats:"微軟雅黑='微軟雅黑';宋體='宋體';黑體='黑體';仿宋='仿宋';楷體='楷體';隸書='隸書';幼圓='幼圓';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",  plugins: this.plugins,  powerpaste_word_import: 'merge',  toolbar: this.toolbar,  paste_data_images: true,  statusbar: true, // 底部的狀態欄  menubar: true, // 最上方的菜單  branding: false, // 水印「Powered by TinyMCE」  images_upload_handler: (blobInfo, success, failure) => {  this.$emit('handleImgUpload', blobInfo, success, failure);  }  },  editorId: this.id,  newValue: ''  };  },  watch: {  newValue(newValue) {  this.$emit('input', newValue);  }  },  mounted() {  tinymce.init({});  },  computed: {  editorValue: {  get() {  return this.value;  },  set(val) {  this.newValue = val;  }  }  },  methods: {  // https://github.com/tinymce/tinymce-vue => All available events  clear() {  this.editorValue = '';  }  } }; </script>  複製代碼

第四步:

在要使用的組件中加入如下代碼：

import TinymceEditor from '@/components/tinymce';
 components: { //註冊TinymceEditor組件  TinymceEditor },  data() {  return {  content: '', //富文本的內容  baseUrl: window.baseUrl, //默認爲'' 空字符串  } }  computed:{  realHeight() {  return (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 200  } }  methods:{  async imgUpload(blobInfo, success, failure) {  const formData = new FormData();  formData.append('file', blobInfo.blob());  try {  const res = await uploadFile(formData);  success(this.server + res);  console.log(this.server + res);  } catch (e) {  console.log(e);  failure('上傳失敗:' + e);  }  }, } 模板中使用:  <tinymce-editor  id="editor"  ref="editor"  v-model="content"  :height="realHeight"  @handleImgUpload="imgUpload" /> 複製代碼

而後就大功告成:

結語

進羣加微信號：reaction_s 備註：進羣

我看到後就會拉進羣了哦，羣裏的小夥伴都很活躍的哦

本文使用 mdnice 排版