前言

筆者在使用tinymce時發現跟著網上的方法去做，基本都會因為版本等一些問題報錯，所以筆者總結了以下方案！可以收藏哦

第一步:

npm install @tinymce/[email protected] [email protected] -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,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,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,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,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"
/>

然後就大功告成:

到此這篇關於vuecli3.x中輕鬆4步帶你使用tinymce的步驟的文章就介紹到這了,更多相關vuecli3.x使用tinymce內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！