1. Import tinymce dependencies

npm i tinymce

2.show me the code

MyEditor.vue

<template> <! <textarea :id="editorId" style="visibility: hidden; hidden" /> </template> <script> import tinymce from "tinymce/tinymce"; Import {contentStyle} from "./plugins"; import { uploadFile } from "~/utils"; Export default {name: "MyEditor", props: {// Rich text content Value: {type: String, default: "",}, // Custom option opt: {type: Object, default: () => {},}, // Control the disabled state. Disabled: {type: Boolean, default: False,},}, data() {return {// Generate a random ID, using uUID might be better editorId: 'Editor -${math.floor (math.random () * 1000000)}', // Rich text instance Editor: null,}; }, watch: {// Implement v-model update content value(val, oldVal) {if (this.editor && val! == oldVal && val ! == this.editor.getContent()) { this.editor.setContent(val); }}, // Control disabled(val) {if (this.editor! == null) { this.editor.setMode(val ? "readonly" : "design"); }},}, mounted() {// initialize the rich text this.init(); }, destroyed() {if (this.editor) {this.editor. Destroy (); this.editor = null; }}, methods: {init() {// default set const opt = {// selector dom to initialize selector: "#" + this.editorId, // Menubar does not want the top bar to be too high so it hides menubar: false, // Specify the plugins to use: [ "autolink lists link image", "searchreplace charmap emoticons", "media help paste wordcount codesample hr preview", ], // Select the function toolbar displayed on the toolbar: "bold italic underline strikethrough | forecolor backcolor removeformat | " + "fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | " + "bullist numlist | outdent indent | subscript superscript | hr | " + "Charmap emoticons | link image media codesample | preview help", / / use the specified font, the default font_formats without Chinese font: "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n; 宋体=宋体; Black body = black body; Imitation song = imitation song; Microsoft YaHei =Microsoft YaHei; Regular script, regular script of = of GB2312 - GB2312 ", / / introduce language pack, also want to introduce downloaded js file, download address (https://www.tiny.cloud/get-tiny/language-packages/) language: "Zh_CN ", height: 400, // Toolbar_mode: "wrap" toolbar_mode: "wrap", // If you do not use CDN, manually import skin: false, content_css: False, content_style: contentStyle, // Automatic uploads: true, file_picker_types: "image", images_upload_handler: UploadFile ({filename: blobinfo.filename (), blob: uploadFile({filename: blobinfo.filename (), blob: blobInfo.blob() }) .then((res) => { success(res); }) .catch((err) => { console.debug(err); failure(err); }); }, // Merge configuration... Setup: (editor) => {this.editor = editor; // Register the initialized event editor.on("init", (e) => this.initsetup (e)); }}; / / parameter tinymce. Init (opt); }, initSetup() { if (! this.editor) return; this.editor.setContent(this.value); V-model this.editor.on("change keyup undo redo", () => {const content = this.editor.getContent(); this.$emit("input", content); }); ,}}}; < / script > < style lang = "SCSS scope" > / / into the rich text skin @ import "~ tinymce/skins/UI/oxide/skin. CSS"; </style>Copy the code

plugins.js

import "tinymce/themes/silver";
// Rich text language package
import "./zh_CN";

import "tinymce/icons/default/icons";

import "tinymce/plugins/autolink";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/charmap";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/emoticons/js/emojis";
import "tinymce/plugins/help";
import "tinymce/plugins/codesample";

// Rich text iframe style, here only introduced the image zoom style
const contentStyle =
  ".mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}" +
  ".mce-content-body img::selection{background:0 0}" +
  ".mce-content-body div.mce-resizehandle{background-color:#4099ff; border-color:#4099ff; border-style:solid; border-width:1px; box-sizing:border-box; height:10px; position:absolute; width:10px; z-index:1298}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default; opacity:.5; outline:1px dashed #000; position:absolute; z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555; Background: rgba (0, 0, 75); border:1px; border-radius:3px; color:#fff; display:none; font-family:sans-serif; font-size:12px; line-height:14px; margin:5px 10px; padding:5px; position:absolute; white-space:nowrap; z-index:10002}";

export { contentStyle };
Copy the code

example.vue

<template>
  <DydEditor v-model="content" :disabled="isDisabled" />
</template>
Copy the code

rendering

reference

TinyMCE official documentation vue-element-admin document and source vue-vben-admin source code