发现一个超好用的文本编辑器！！！

<!--
 * @File: index
 * @Author: PHY
 * @Date: 2022/1/6 18:03
 * @Description: tinymce富文本编辑器
-->
<template>
    <div class="tinymce">
        <editor id="tinymce" :style="'width: 100%;height: ' + tinymceHeight" v-model="value" :init="init"/>
    </div>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import {uploadImage} from "@/api/system/image";
export default {
    name: "index",
    components: {
        Editor
    },
    props: {
        tinymceHtml: '',
        tinymceHeight: {
            type: String,
            default: '100%'
        }
    },
    watch: {
        tinymceHtml(newV,oldV) {
            this.value = newV
        }
    },
    data() {
        return {
            value: this.tinymceHtml, //父组件通过ref拿到该组件的值
            init: {
                plugins: "image link code table lists wordcount", //引入插件
                toolbar: "h1 h2 h3 h4 | " +
                    "fontselect fontsizeselect | " +
                    "bold italic underline strikethrough lineheight forecolor backcolor  | " +
                    "alignleft aligncenter alignright alignjustify numlist bullist | " +
                    "link image quicklink blockquote table preview fullscreen", //工具栏
                selector: "#tinymce", //tinymce的id
                language_url: "/tinymce/zh_CN.js",
                language: "zh_CN",
                skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
                browser_spellcheck: true, // 拼写检查
                branding: false, // 去水印
                elementpath: false, //禁用编辑器底部的状态栏
                statusbar: false, // 隐藏编辑器底部的状态栏
                paste_data_images: true, // 允许粘贴图像
                menubar: false, // 隐藏最上方menu
                fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
                font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体

                file_picker_types: 'image',
                images_upload_credentials: true,
                // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
                images_upload_handler: (blobInfo, success, failure) => {
                    let formData = new FormData();
                    formData.append("image", blobInfo.blob());
                    //uploadImg是上传图片的请求接口
                    uploadImage(formData).then(res => {
                        const img = "https://phy0412.top" + process.env.VUE_APP_BASE_API + res.imgUrl;
                        success(img);
                    })
                }
            }
        }
    },
    mounted() {
        tinymce.init({});
    },
    methods: {},
}
</script>

<style lang="scss" scoped>
</style>