1.引入必要组件：

npm install --save tinymce "@tinymce/tinymce-vue"
npm install --save "@types/tinymce"

2.页面中引入：

import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
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";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/quickbars";
import "tinymce/plugins/preview";// 引入富文本编辑器主题的js和css
import "tinymce/themes/silver/theme.min.js";

3.页面

<Editor  v-model="tinymceHtml" :init="initData" />

4. init

const initData = {//初始化数据selector: "textarea",skin_url: "/public/tinymce/skins/ui/oxide",content_css:"/public/tinymce/skins/content/default/content.css",// images_upload_url: uploadUrl,images_upload_base_path:"",height: 350, // 限制高度min_height: 200,statusbar: false,object_resizing: false,image_description: false,image_dimensions: false, // 禁止操作图片plugins: "link lists image code table wordcount fullscreen preview", // 富文本插件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:"code undo redo fontfamily fontsize fontname bold italic underline strikethrough removeformat | fontsizeselect | forecolor | alignleft aligncenter alignright | fullscreen | image | link | preview |",branding: false, // //是否禁用“Powered by TinyMCE”menubar: false, //顶部菜单栏显示// menubar: "file edit view format table",paste_data_images: false, // 禁止粘贴图片promotion: false
};