vue富文本tinymce踩坑记

最近在搞富文本，经过对比我选择了tinymce，也遇到很多七七八八的问题，现在终于搞好了

第一、 安装

我现在的版本
“@tinymce/tinymce-vue”: “^3.2.2”,
“tinymce”: “^5.4.2”,

npm install @tinymce/tinymce-vue -S,npm install tinymce -S

第二、 从node_modules复制我们想要的东西

下载的时候可以先在static下面建个目录tinymce，下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录下面，
我这里用的是脚手架4.3.1的我就放在public里面的static

第三、引用语言包

因为这个是英文的为了方便可以引用中文包语言包下载

第四、引入组件

<template>
  <div class="tinymce-editor">
    <editor id="tinymce" v-model="myValue" :init="init" @onClick="onClick"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件
export default {
    name:'tinymceEditor',
    components: { Editor },
    props: {
        value: {
            type: String,
            default: ''
        },
        // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
        // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
        baseUrl: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default: 'lists image media table wordcount'
        },
        toolbar: {
            type: [String, Array],
            default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
        }
    },
    data() {
        return {
            //初始化配置
            init: {
                language_url: '/static/tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
                height: 300, // 编辑器高度
                branding: false, // 是否禁用“Powered by TinyMCE”
                menubar: true, // 顶部菜单栏显示
                plugins: this.plugins,
                toolbar: this.toolbar,
                //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
                //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                // images_upload_handler: (blobInfo, success) => {
                //     const img = 'data:image/jpeg;base64,' + blobInfo.base64();
                //     success(img);
                // }
            },
            myValue: this.value
        };
    },
    mounted() {
        tinymce.init({});
    },
    methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
        onClick(e) {
            this.$emit('onClick', e, tinymce);
        },
        //可以添加一些自己的自定义事件，如清空内容
        clear() {
            this.myValue = '';
        }
    },
    watch: {
        value(newValue) {
            this.myValue = newValue;
        },
        myValue(newValue) {
            this.$emit('input', newValue);
        }
    }
};
</script>

使用方法

<TinymceEditor ref="editor" :value="msg" @onClick="onClick" ></TinymceEditor>
<button @click="clear">清空内容</button>

就这么简单但是我还是搞了好久好久呜呜呜呜小菜鸡的悲哀啊

第五、最后来说下我遇到问题

1、首先我的样式出不来主要是我没有那个样式包，于是我苦苦寻找，终于皇天不负有心人然我找到了

之前看别人的文章都是引用这个

import 'tinymce/themes/modern/theme'

但是我下载的包里没有这个，改成就这个就好了

import 'tinymce/themes/silver/theme';

2、第二问题是出来了都是not found的没有截图忘记了,控制台还有这个Uncaught SyntaxError: Unexpected token ‘<’
你就看控制台后面是什么js缺少什么你就引入什么就完美解决了

import 'tinymce/icons/default/icons';//为了解决icons的问题
// 下面是一些插件你需要什么就放什么可以去官网的插件库去找
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件

3、还有最后一个问题
就是skin_url这个地址的问题
写这个地址文本都显示不出来

skin_url: '/static/tinymce/skins/lightgray',

改成这个就好啦

skin_url: '/static/tinymce/skins/ui/oxide', // skin路径