在vue中使用tinymce富文本編輯器，解決tinymce在dialog對話框中層級太低的問題

1、安裝

npm install tinymce -S

2、把node_modules\tinymce里面的文件 包括tinymce文件夾 全部復制到static文件夾下面，如下圖

 

 

3、tinymce默認是英文界面，還需要下載一個中文語言包zh_CN.js

https://www.tiny.cloud/get-tiny/language-packages/

在tinymce文件夾下新建langs文件夾，將下載好的語言包放到langs文件夾下面如圖

 

 

 4、在main.js中引入tinymce

 

 

 

 

 

 5、在components文件夾下新建Editor.vue文件

 

 

 Editor.vue：

<template>
  <div class="SEditor">
    <textarea class="my_editor" id="Editor" v-model="Editortext"></textarea>
  </div>
</template>

<script>
    export default {
        props: {
            EditorTexts: ''
        },
        data() {
            return {
                Editortext:'',
            }
        },
        computed: {

        },
        watch: {
            EditorTexts: function (newVal, oldVal) {
                console.log(newVal)
                this.Editortext= newVal
                tinyMCE.activeEditor.setContent(newVal)
            }
        },
        mounted() {
            this.tinymce();
        },
        beforeDestroy() {
            this.$tinymce.remove()
        },
        methods: {
            tinymce() {
                let _this = this;
                _this.$tinymce.baseURL = '/static/tinymce'
                _this.$tinymce.init({
                    selector: "#Editor",
                    language_url: '../../../../static/tinymce/langs/zh_CN.js',//設置中文
                    language: 'zh_CN',
                    plugins: [ //配置插件：可自己隨意選擇，但如果是上傳本地圖片image和imagetools是必要的
                        'advlist autolink link image lists charmap  preview hr anchor pagebreak ',
                    ],
                    //工具框，也可自己隨意配置
                    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | forecolor backcolor',
                    image_advtab: true,
                    image_dimensions: true,
                    width:'97%',
                    height: 380,
                    table_default_styles: {
                        width: '100%',
                        borderCollapse: 'collapse'
                    },
                    image_title: false, // 是否開啟圖片標題設置的選擇，這里設置否
                    automatic_uploads: true,
                    // 圖片異步上傳處理函數
                    images_upload_handler: (blobInfo, success, failure) => {
                        var formData;
                        formData = new FormData();
                        formData.append('file',blobInfo.blob());
                        // formData.append('group','editor');
                        // _this.$requestPost這個是我調用后台圖片上傳接口
                        const img_file = blobInfo.blob()
                        console.log(blobInfo.blob())
                        _this.$requestPost({
                            url: "/baseapi/files?group=editor",
                            params: formData,
                        }, data => {
                            success('api'+data.url)
                            //url地址一定要拼接正確，否則圖片將不會顯示在富文本框中
                        }, err => {
                            failure('上傳失敗')
                        })
                    },
                    init_instance_callback: function(editor) {
                        editor.on('keyup', () => {
                            // 獲取富文本編輯器里面的內容
                            _this.Editortext = editor.getContent();
                            // editor.setContent(_this.Editortext)

                        });
                    },
                    setup: (editor) => {
                        // 拋出 'on-ready' 事件鈎子
                        editor.on(
                            'init', () => {
                                // console.log(_this.Editortext)
                                // console.log(_this.EditorTexts)
                                //將props中監測到的值賦給data中的Editortext
                                _this.Editortext = _this.EditorTexts
                                editor.setContent(_this.Editortext)
                            }
                        )
                        // 拋出 'input' 事件鈎子，同步value數據
                        editor.on(
                            'input change undo redo', () => {
                                _this.$emit('input', editor.getContent())
                            }
                        )
                    }
                    }).then(resolve => {
                    // 初始化富文本編輯器里面的內容
                    resolve[0].setContent(_this.Editortext)

                });
            },

        }
    }
</script>

<style>

</style>

6、在需要的地方引入組件

 

 

 

 

 

 7、解決tinymce在dialog對話框中層級太低的問題？？？

方法很簡單，找到F:\hzyy-htnew\static\tinymce\skins\ui\oxide下面的skin.min.css文件，將里面的z-index統一后面加五個零

參考鏈接：tinymce中文文檔 https://www.cnblogs.com/jvziking/p/12028275.html

富文本編輯器tinymce獲取文本內容和設置文本內容：https://blog.csdn.net/u012679583/article/details/50505842

初始化：https://segmentfault.com/a/1190000012791569

主要參考：https://blog.csdn.net/vipsongtaohong/article/details/89553271