vue3使用tinymce

第一种方法：通过使用key云端调用

安装@tinymce/tinymce-vue

npm i @tinymce/tinymce-vue

去官网注册一个账号获取key，然后去https://www.tiny.cloud/get-tiny/language-packages/下载语言包，放在目录下的public里

在组件中使用，工具栏可以是字符串或者数组，一行字符串可以看做一行工具栏，| 表示图标之间稍微隔开一点，工具栏清单：https://www.tiny.cloud/docs/tinymce/6/available-toolbar-buttons/。插件的话有免费的和付费的，插件清单：https://www.tiny.cloud/docs/tinymce/6/plugins/。

<script setup >
import Editor from '@tinymce/tinymce-vue'
const key = '申请到的key'
let init = reactive({
    // 选择器
    selector: 'textarea',
    // 设置本地语言，在本地的路径
    language_url: '/tinymce/langs/zh-Hans.js',
    // 设置本地语言
    language: 'zh-Hans',
    // 设置工具栏
    toolbar: [
        'bold italic hr | fontsize forecolor backcolor | blocks blockquote removeformat | undo redo ',
        'bullist table insertdatetime | link charmap emoticons wordcount searchreplace code | codesample visualblocks image fullscreen preview',
    ],
    // 设置插件
    plugins: 'codesample lists advlist link autolink charmap emoticons fullscreen preview code searchreplace table visualblocks wordcount insertdatetime image',
})
let content = ref('')
</script>
<template>
     <Editor :api-key="key" v-model="content" :init="init" />
</template>

第二种方法：本地使用

需要安装tinymce和@tinymce/tinymce-vue

npm i tinymce @tinymce/tinymce-vue

从node_modules的tinymce里复制以下文件到目录下的public里，语言包去https://www.tiny.cloud/get-tiny/language-packages/下载

在组件中使用，工具栏可以是字符串或者数组，一行字符串可以看做一行工具栏，| 表示图标之间稍微隔开一点，工具栏清单：https://www.tiny.cloud/docs/tinymce/6/available-toolbar-buttons/。插件的话有免费的和付费的，插件清单：https://www.tiny.cloud/docs/tinymce/6/plugins/。

<script setup >
import Editor from '@tinymce/tinymce-vue'
//引入tinymce开启本地模式
import 'tinymce/tinymce'
//引入图标和主题等
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/models/dom'
//引入插件
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/link'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/code'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/image'

let init = reactive({
    // 选择器
    selector: 'textarea',
    // 设置本地主题
    skin_url: '/tinymce/skins/ui/oxide',
    // 设置本地css
    content_css: '/tinymce/skins/content/default/content.css',
    // 设置本地plugins中emojis的位置，用来获取表情,不用这个插件不用设置
    emoticons_database_url: '/tinymce/plugins/emoticons/js/emojis.js',
    // 设置本地语言
    language_url: '/tinymce/langs/zh-Hans.js',
    // 设置本地语言
    language: 'zh-Hans',
    // 设置工具栏
    toolbar: [
        'bold italic hr | fontsize forecolor backcolor | blocks blockquote removeformat | undo redo ',
        'bullist table insertdatetime | link charmap emoticons wordcount searchreplace code | codesample visualblocks image fullscreen preview',
    ],
    // 设置插件
    plugins: 'codesample lists advlist link autolink charmap emoticons fullscreen preview code searchreplace table visualblocks wordcount insertdatetime image',
})
let content = ref('')
</script>
<template>
     <Editor v-model="content" :init="init" />
</template>

 效果