首先先安转Editor

npm i @tinymce/tinymce-vue

然后在使用到的页面引入

import Editor from "@tinymce/tinymce-vue";

使用

<Editor :init="init" v-model="ruleForm.data.description" style="width: 100%"></Editor>

//首先引入一张显示在头部的按钮图片
import noImg1 from "@/assets/images/uploadImg.png";

const init = reactive({
  menubar: false,
  language: "zh_CN",
  height: 265,
  plugins: "wordcount ",
  toolbar: "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo |  formatselect | forecolor backcolor | bullist numlist outdent indent | lists link image media table code | imageupload | removeformat | fullscreen",
  branding: false,
    setup: (editor) => {
        //To add a simple triangle icon:
        editor.ui.registry.addIcon("imageupload", `<img style="width: 24px; height: 24px" src="${noImg1}" />`);
        editor.ui.registry.addButton("imageupload", {
            icon: "imageupload",
            onAction: () => {
                let imageInput = document.createElement("input");
                imageInput.setAttribute("type", "file");
                imageInput.setAttribute("multiple", "multiple");
                imageInput.setAttribute("accept", "image/gif, image/jpg, image/jpeg, image/png");
                document.body.appendChild(imageInput);
                // 模拟input点击事件
                let evt = new MouseEvent("click", {
                    bubbles: false,
                    cancelable: true,
                    view: window,
                });
                imageInput.dispatchEvent(evt);
                imageInput.addEventListener("change", (e) => {
                    // 判断图片大小
                    for (const key in evt.target.files) {
                        let item = evt.target.files[key];
                        if (item.size) {
                            if (item.size / 1024 / 1024 > 10) {
                                ElMessage.warning("图片上传大小应低于10M");
                                return false;
                            }
                        }
                    }
                    let arrTmp = [];
                    for (const key in evt.target.files) {
                        let item = evt.target.files[key];
                        if (item.lastModified) {
                            arrTmp.push(item);
                        }
                    }
                    // 插入
                    let formData = new FormData();
                    if (arrTmp.length > 0) {
                        arrTmp.forEach((item, index) => {
                            formData.append(`file[${index}]`, item);
                        });
                    } else {
                        formData.append("file", evt.target.files[0]);
                    }
                    uploadImg(formData).then((res) => {
                        if (res.data.length > 0) {
                            res.data.forEach((item) => {
                                editor.execCommand("mceInsertContent", false, `<img src='/${item}'/>`);
                            });
                        }
                        ElMessage.success(res.msg);
                    })
                });
                // 图片插入完后，remove
                imageInput.remove();
            },
        });
    },
});