tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and you need to introduce @tinymce/tinymce- vue, and it is a foreign rich text plug-in. It has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the wall).

1. Install related dependencies

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

2. Download the Chinese package

3. Introduce skin and Chinese package

Create a new tinymce in the project public folder folder,
Extract the downloaded Chinese package to this folder
Then find the skins folder in node_modules/tinymce, and also copy it to public/tinymce

4. Encapsulate components: Create a new TEditor.vue under src/components and write the following code

<template>
  <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
</template>


<script setup lang="ts">
//JS部分
//在js中引入所需的主題和組件
import tinymce from &#39;tinymce/tinymce&#39;
import &#39;tinymce/skins/content/default/content.css&#39;
import Editor from &#39;@tinymce/tinymce-vue&#39;
import &#39;tinymce/themes/silver&#39;
import &#39;tinymce/themes/silver/theme&#39;
import &#39;tinymce/icons/default&#39;; //引入編輯器圖標icon，不引入則不顯示對應圖標
import &#39;tinymce/models/dom&#39; // 這里是個坑 一定要引入


//在TinyMce.vue中接著引入相關插件
import "tinymce/icons/default/icons"
// import "tinymce/plugins/image" // 插入上傳圖片插件
// import "tinymce/plugins/media" // 插入視頻插件
import "tinymce/plugins/table" // 插入表格插件
import "tinymce/plugins/lists" // 列表插件
import "tinymce/plugins/wordcount" // 字數(shù)統(tǒng)計插件
import "tinymce/plugins/code" // 源碼
// import "tinymce/plugins/fullscreen" //全屏

//接下來定義編輯器所需要的插件數(shù)據(jù)
import { reactive, ref } from "vue"
import { onMounted, defineEmits, watch } from "@vue/runtime-core"
import axios from &#39;axios&#39;
// import { updateImg } from &#39;@/api/order/order&#39;
const emits = defineEmits(["getContent"])
//這里我選擇將數(shù)據(jù)定義在props里面，方便在不同的頁面也可以配置出不同的編輯器，當然也可以直接在組件中直接定義
const props = defineProps({
  value: {
    type: String,
    default: () => {
      return ""
    },
  },
  baseUrl: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: "lists  table",
  },//必填
  toolbar: {
    type: [String, Array],
    default:
      "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ",
  },//必填
})
//用于接收外部傳遞進來的富文本
const myValue = ref(props.value)
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""))
//定義一個對象 init初始化
const init = reactive({
  selector: &#39;#&#39; + tinymceId.value, //富文本編輯器的id,
  language_url: "/tinymce/langs/zh_CN.js", // 語言包的路徑，具體路徑看自己的項目，文檔后面附上中文js文件
  language: "zh_CN", //語言
  skin_url: "/tinymce/skins/ui/oxide", // skin路徑，具體路徑看自己的項目
  height: 400, //編輯器高度
  branding: false, //是否禁用“Powered by TinyMCE”
  menubar: true, //頂部菜單欄顯示
  image_dimensions: false, //去除寬高屬性
  plugins: props.plugins,  //這里的數(shù)據(jù)是在props里面就定義好了的
  toolbar: props.toolbar, //這里的數(shù)據(jù)是在props里面就定義好了的
  font_formats: &#39;Arial=arial,helvetica,sans-serif; 宋體=SimSun; 微軟雅黑=Microsoft Yahei; Impact=impact,chicago;&#39;, //字體
  fontsize_formats: &#39;11px 12px 14px 16px 18px 24px 36px 48px 64px 72px&#39;, //文字大小
  // paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
  paste_webkit_styles: "all",
  paste_merge_formats: true,
  nonbreaking_force_tab: false,
  paste_auto_cleanup_on_paste: false,
  file_picker_types: &#39;file&#39;,
  content_css: &#39;/tinymce/skins/content/default/content.css&#39;, //以css文件方式自定義可編輯區(qū)域的css樣式，css文件需自己創(chuàng)建并引入
  //圖片上傳
  images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {

    if (blobInfo.blob().size / 1024 / 1024 > 2) {
      reject({ message: &#39;上傳失敗，圖片大小請控制在 2M 以內&#39;, remove: true })
      return
    } else {
      const ph = import.meta.env.VITE_BASE_PATH + ":" + import.meta.env.VITE_SERVER_PORT + "/"
      let params = new FormData()
      params.append(&#39;file&#39;, blobInfo.blob())

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",

        }
      }

      axios.post(&#39;xxxx&#39;, params, config).then(res => {
        if (res.data.code == 200) {
          resolve(ph + res.data.msg)  //上傳成功，在成功函數(shù)里填入圖片路徑
        } else {
          reject(&#39;HTTP Error: 上傳失敗&#39; + res.data.code);
          return
        }
      }).catch(() => {
        reject(&#39;上傳出錯，服務器開小差了呢&#39;)
        return
      })
    }
  }),

  // 文件上傳
  file_picker_callback: (callback, value, meta) => {
    // Provide file and text for the link dialog
    if (meta.filetype == &#39;file&#39;) {
      callback(&#39;mypage.html&#39;, { text: &#39;My text&#39; });
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == &#39;image&#39;) {
      callback(&#39;myimage.jpg&#39;, { alt: &#39;My alt text&#39; });
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == &#39;media&#39;) {
      callback(&#39;movie.mp4&#39;, { source2: &#39;alt.ogg&#39;, poster: &#39;image.jpg&#39; });
    }
  }
})

//監(jiān)聽外部傳遞進來的的數(shù)據(jù)變化
watch(
  () => props.value,
  () => {
    myValue.value = props.value
    emits("getContent", myValue.value)
  }
)
//監(jiān)聽富文本中的數(shù)據(jù)變化
watch(
  () => myValue.value,
  () => {
    emits("getContent", myValue.value)
  }
)
//在onMounted中初始化編輯器
onMounted(() => {
  tinymce.init({})
})
</script>

5. Register and use components

// 使用
<TEditor ref="editor" v-model="formState.content" :disabled=&#39;disabled&#39; @getContent="getContent"/>
<script setup lang="ts">
import {  reactive } from "vue";
// 引入
import TEditor from &#39;@/components/TEditor.vue&#39;;
const formState = reactive({contents :&#39;&#39;})
const getContent = (v: string) => {
  formState.contents = v
}
</script>

Tinymce version

 "@tinymce/tinymce-vue": "^5.0.0"

 "tinymce": "^6.0.3"

The above is the detailed content of How to use tinymce in vue3 project. For more information, please follow other related articles on the PHP Chinese website!