vue2 安装 tinymce

npm install tinymce@5.4.1 -S
npm install @tinymce/tinymce-vue@3.2.2 -S
用这两个命令安装，注意版本，之后会用到

然后在主文件夹下新建一个public（vue2一般没有这个文件夹，有就不用建了）

然后将node_modules下的icons、plugins、skins复制到public里（有些tinymce版本没有icons文件，所以安装的时候要注意），到这里tinymce就已经安装完了，接下来测试一下
从网上抄了两段代码来测试一下tinymce是否能正常使用
代码：

<template>
    <div class="tinymce-editor">
        <Editor
            ref="editor"
            :disabled="isShow"
            :id="tinyId"
            v-model="tinyValue"
            :init="{ ...init, height }"
        />
    </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
import "tinymce/plugins/noneditable";
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/media";
import "tinymce/plugins/template";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview"; 
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/help";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/hr";
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
export default {
    name: "Tinymce",
    components: { Editor },
    props: {
        height: {
            type: Number,
            default: 500,
        },
        id: {
            type: String,
            default: "tinymceEditor",
        },
        value: {
            type: String,
            default: "",
        },
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            init: {
                language_url: "./tinymce/langs/zh_CN.js",   //语种路径
                language: "zh_CN",  //显示语种
                skin_url: "./tinymce/skins/ui/oxide",   //skin 路径
                height: 500,    // 编辑器高度
                content_style: "p {margin: 0px;padding:0px;border:0px}",    //编辑器样式
                lineheight_formats:
                    "1 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2 2.5 3 3.5 4 4.5 5",
                fontsize_formats:
                    "10px 11px 12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 28px 30px 32px 32px 34px 36px",
                font_formats:
                    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';Arial=arial,helvetica,sans-serif; Helvetica=helvetica;Symbol=symbol;Tahoma=tahoma,arial,helvetica;Terminal=terminal,monaco;Times New Roman=times new roman,times;",
                plugins:
                    " powerpaste indent2em lists image media table wordcount code fullscreen toc insertdatetime  searchreplace   link charmap  hr fullpage autosave nonbreaking  visualchars visualblocks  pagebreak print preview  anchor",
                powerpaste_allow_local_images: true,
                powerpaste_word_import: "propmt", // 此设置控制如何筛选从 Microsoft Word 粘贴的内容
                powerpaste_html_import: "propmt",
                paste_data_images: true,    // 粘贴的同时能把内容里的图片自动上传
                paste_word_valid_elements: "*[*]",  // 此选项使您能够配置特定于 MS Office 的有效*元素
                paste_convert_word_fake_lists: true,    // 插入 word 文档需要该属性
                //  paste
                toolbar: [
                    "undo redo newdocument fullscreen restoredraft print bold italic underline strikethrough subscript superscript removeformat blockquote cut copy paste pastetext bullist  numlist alignleft aligncenter alignright alignjustify  hr outdent indent indent2em lineheight backcolor textcolor forecolor textcolor  formatselect  fontselect fontsizeselect code ltr directionality  rtl directionality link unlink openlink image media charmap  preview insertdatetime table tabledelete tablecellprops tablemergecells  tablesplitcells tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops tablecutrow tablecopyrow tablepasterowbefore  tablepasterowafter  tableinsertcolbefore tableinsertcolafter tabledeletecol ",
                ],  // 工具栏，参数类型是个数组
                statusbar: false,
                menubar: false, // 菜单栏的配置，也是数组
                advlist_bullet_styles: "default,circle,square", //此选项允许您在默认 bullist 工具栏控件中包含特定的无序列表项标记 默认值：default,circle,disc,square
                advlist_number_styles: "default,lower-alpha,upper-alpha",
                branding: false, // 水印“Powered by TinyMCE”
                // 上传 图片 监听
                images_upload_handler: (blobInfo, success, failure) => {
                    this.imgUpload(blobInfo, success, failure);
                },
                videoUrl: "",
                uploaded: false,
                file_picker_types: "image media",// 此选项允许您通过空格或逗号分隔的类型名称列表指定所需的文件选取器类型。目前有三种有效类型：文件、图像和媒体
                // 点击上传 文件监听
                file_picker_callback: (callback, value, meta) => {
                    this.uploadVideo(callback, value, meta);
                },
            },
            tinyId: this.id,
            newValue: "",
        };
    },
    watch: {
        newValue(newValue) {
            this.$emit("input", newValue);
        },
    },
    mounted() {
        // 只读模式
        // tinymce.activeEditor.setMode('readonly');
        // 通过id禁用编辑器
        // tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
        tinymce.init({});
    },
    computed: {
        tinyValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.newValue = val;
            },
        },
    },
    methods: {
        // 富文本图片上传
        imgUpload(blobInfo, success, failure) {
            var size = blobInfo.blob().size / 1000;
            if (size > 6000) {
                this.$message({
                    message: " 图片大小不允许超过6M，请压缩后上传!",
                    type: "warning",
                });
            }
            const formData = new FormData();
            formData.append("file", blobInfo.blob());
            // 上传图片接口   换成自己的接口
            this.$http
                .post(this.$url.uploadFile, formData)
                .then((res) => {
                    if (res.code == 200) {
                        // 图片路径
                        success(res.data.fileUrl);
                    } else {
                        this.$message.error("上传失败:" + res.message);
                    }
                });
        },
        // 视频上传
        uploadVideo(callback, value, meta) {
            if (meta.filetype == "media") {
                let input = document.createElement("input"); //创建一个隐藏的input上传
                input.setAttribute("type", "file");
                let that = this;
                input.onchange = async function () {
                    let file = this.files[0]; //选取第一个文件
                    if (file.type.includes("video")) {
                        this.uploaded = await that.uploadFile(file, "media"); //上传视频返回的url
                    } else {
                        that.$message.error("请选择视频文件！");
                        return false;
                    }
                    if (this.uploaded) {
                        callback(that.videoUrl); //将url显示在弹框输入框中
                    }
                };
                // 触发点击
                input.click();
            } else if (meta.filetype == "image") {
                let input = document.createElement("input"); //创建一个隐藏的input上传
                input.setAttribute("type", "file");
                let that = this;
                input.onchange = async function () {
                    let file = this.files[0]; //选取第一个文件
                    if (file.type.includes("image")) {
                        this.uploaded = await that.uploadFile(file, "media"); //上传图片返回的url
                    } else {
                        that.$message.error("请选择图片文件！");`在这里插入代码片`
                        return false;
                    }
                    setTimeout(() => {
                        if (this.uploaded) {
                            callback(that.videoUrl); //将url显示在弹框输入框中
                        }
                    }, 600);
                };
                // 触发点击
                input.click();
            }
        },
        // 上传图片或者视频
        uploadFile(params) {
            let file = params;
            let form = new FormData();
            form.append("file", file);
            // 上传图片接口
            return this.$http
                .post(this.$url.uploadOperationFiles, form)
                .then((res) => {
                    if (res.code == 200) {
                        // 上传成功图片路径
                        this.videoUrl = res.data.fileUrl;
                        return true;
                    } else {
                        this.$message.error("上传失败:" + res.message);
                        return false;
                    }
                });
        },
        clear() {
            this.tinyValue = "";
        },
    },
};
</script>

<template>
	<div>
	     <Tinymce
                id="editor1"
             	:isShow="type !== 'detail' ? false: true "
                v-model="ruleForm.detail"
                ref="editor"
     />
	</div>
</template>
<script>
import Tinymce from "@/components/view/tinymce";
export default {
components: { Tinymce },
data(){
	return	{
		ruleForm:{
			detail:''
		}
	}
	}
}
</script>

记得改一下路径和模块名称
最后运行一下看一下能否正常使用

界面出来了证明安装成功了
结束