Use Tinymce rich text editor in Vue3 (latest version)

---

foreword

I have recently used the WangEditor editor and the Tinymce editor, and the usage method is as follows (the editor version used is the latest on the official website)

Sinicization package link: Sinicization compression package
Extraction code: 5x8t After copying this content, open the Baidu Netdisk mobile app, the operation is more convenient

Sinicization package download addressOfficial
website download addressChinese
document

---

1. Installation method 1 (npm, yarn download)

PS: 由于汉化失败，所以就没采用该方法

• installation method

yarn add "@tinymce/tinymce-vue@^5" // yarn 
npm install "@tinymce/tinymce-vue@^5" // npm 

• Create a new Vue file

<template>
  <div class="app-container">
    <Editor
      id="tinymce"
      v-model="tinymceHtml"
      :init="init"
      @paste="customPaste($event)"
    />
    <!-- <div v-html="tinymceHtml"></div> -->
  </div>
</template>
<script setup lang="ts">
import {
    
     ref, onMounted } from 'vue'
import tinymce from 'tinymce/tinymce'
// 使用该方法需要引入下面的数据
import 'tinymce/models/dom' // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue' // 引入组件
import 'tinymce/icons/default'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'

// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'

// 以上所有的样式在 node_modules 下面 tinymce 里面的 plugins 都能找到。
const tinymceHtml = ref<string>('')
const init = {
    
    
  //初始化数据
  selector: 'textarea',
  height: 300, // 限制高度
  statusbar: false,
  object_resizing: false,
  image_description: false,
  image_dimensions: false, // 禁止操作图片
  plugins: 'link lists image code table wordcount', // 富文本插件
  font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px 128px',
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
  toolbar:
    'undo redo fontfamily fontsize fontname bold italic underline strikethrough | fontsizeselect | forecolor | alignleft aligncenter alignright',
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: false, //顶部菜单栏显示
  paste_data_images: false, // 禁止粘贴图片
}

const emits = defineEmits<{
      
      
  (event: 'update:bindHtml', val: string): void // 富文本内容
}>()

onMounted(() => {
    
    
  tinymce.init({
    
    }) // 初始化富文本
})

// 实现双向绑定
watch(
  () => tinymceHtml.value,
  () => {
    
    
    emits('update:bindHtml', tinymce.activeEditor!.getContent())
  }
)
</script>

2. Installation method 2 (download official website compressed package method) - recommended

• Select the Docs select menu and select the Free menu

• Download the compressed package and the finished package

• Unzip the downloaded compressed package to the assets\ public folder (I use public here)
  

• Put the downloaded Chinese package in the langs directory in the decompressed folder
  

• Introduced in the index.html file (according to the decompressed path above, the public I use here, / represents the public directory)
  

• download dependencies

yarn add "@tinymce/tinymce-vue@^5" // yarn 

• Create a new Vue component page

<template>
  <div class="app-container">
    <Editor
      id="tinymce"
      v-model="tinymceHtml"
      :init="init"
      @paste="customPaste($event)"
    />
    <!-- <div v-html="tinymceHtml"></div> -->
  </div>
</template>
<script setup lang="ts">
import {
    
     ref, onMounted } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue' // 引入组件

const tinymceHtml = ref<string>('')
const init = {
    
    
  //初始化数据
  selector: 'textarea',
  language: 'zh-Hans', // 这里名称根据 zh-Hans.js 里面写的名称而定
  height: 300, // 限制高度
  statusbar: false, // 显示下方操作栏
  image_dimensions: false, // 禁止操作图片
  plugins: 'link lists image code table wordcount', // 富文本插件
  font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px 128px', // 字体大小文本
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif', // 字体选择配置
  toolbar:
    'undo redo fontfamily fontsize fontname bold italic underline strikethrough | fontsizeselect | forecolor | alignleft aligncenter alignright',  // 菜单栏配置
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: false, //顶部菜单栏显示
  paste_data_images: false, // 禁止粘贴图片
}

const emits = defineEmits<{
      
      
  (event: 'update:bindHtml', val: string): void // 富文本内容
}>()

// 双向绑定
watch(
  () => tinymceHtml.value,
  () => {
    
    
    emits('update:bindHtml', tinymce.activeEditor!.getContent())
  }
)
</script>

• The effect is displayed, and the menu bar can be displayed according to the functions you want
  

Summarize

Since it is not used much, the specific method is not very detailed, please bear with me!