1.安裝插件
- npm 安裝
npm install --save "@tinymce/tinymce-vue@^4"
- yarn 安裝
yarn add "@tinymce/tinymce-vue@^4"
pnpm 安裝
pnpm add "@tinymce/tinymce-vue@^4"
2.再然后把node_modules/tinymce下的skins 文件夾復制到public文件夾下
41657462873_.pic_thumb.jpg
31657462809_.pic_thumb.jpg
3.下載中文語言包
Language Packages | Trusted Rich Text Editor | TinyMCE
51657463063_.pic.jpg
- 把解壓后的語言包，也放到 public文件夾下面；
4.富文本組件引入使用
<template>
<div class="app-container">
<h1>tinymce</h1>
<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
<div v-html="tinymceHtml"></div>
</div>
</template>
<script setup>
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";
// 以上所有的樣式在 node_modules 下面 tinymce 里面的 plugins 都能找到昆庇。
const tinymceHtml = ref("請輸入內容");
const init = {
//初始化數(shù)據(jù)
language_url: "/langs/zh-Hans.js", // 引入語言包（該語言包在public下润匙，注意文件名稱）
language: "zh-Hans", // 這里名稱根據(jù) zh-Hans.js 里面寫的名稱而定
skin_url: "/skins/ui/oxide", // 這里引入的樣式
height: 300, // 限制高度
plugins: "link lists image code table wordcount", // 富文本插件
toolbar:
"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
branding: false, // //是否禁用“Powered by TinyMCE”
menubar: true, //頂部菜單欄顯示
// paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
content_css: "/skins/content/default/content.css", //以css文件方式自定義可編輯區(qū)域的css樣式在跳，css文件需自己創(chuàng)建并引入
images_upload_handler: (blobInfo,success, failure) => {
// console.log(blobInfo.blob());
// 上傳圖片需要，F(xiàn)ormData 格式的文件辛慰；
const formDataUp = new FormData();
// img 是接口需要的上傳的屬性名深员，一般屬性名是 file
formDataUp.append("img", blobInfo.blob());
// // console.log(formDataUp);
axios.post("xxxx", formDataUp).then((res) => {
success("返回的上傳圖片后的地址");
});
}
};
onMounted(() => {
tinymce.init({}); // 初始化富文本
});
</script>
