在vue中使用tinymce组件

第一步：安装tinymce npm install @tinymce/tinymce-vue --save

第二步:下载tinymce文件，要把文件放到本地使用 https://www.tinymce.com

第三步：写组件

<template>
    <editor id='tinymce' :init='init'></editor>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';
import tinymce from '../../static/tinymce/tinymce.min.js';
import '../../static/tinymce/themes/modern/theme';
import '../../static/tinymce/plugins/image/plugin';
import '../../static/tinymce/plugins/imagetools/plugin';
import $ from 'jquery';
export default {
    components: {
       Editor
    },
    data() {
        return {
            editor: null,
            init: { 
                language_url: '/static/tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                skin_url: '/static/tinymce/skins/lightgray',
                height: 100,
                plugins: "image imagetools",
                image_caption: true,
                image_advtab: true,
                // content_css: [
                // '/alitech/static/css/github-markdown.css',],
                // menubar: "insert",
                // image_list:[],
                // plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
                // toolbar:
                // 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
                branding: false,
                file_browser_callback: function (field_name, url, type, win) {

                    console.log(field_name);
                    if (type == 'media') return false;
                    var accept = {
                        image: 'image/png, image/gif, image/jpg, image/jpeg',
                        media: 'audio/mpeg, audio/wav, video/mp4, video/webm, video/ogg'
                    };

                    var eleFile = $('<input type="file" accept="' + accept[type] + '">');
                    eleFile.click();

                    eleFile.on('change', function () {
                        var file = this.files[0];
                        var name = file.name || 'screenshot.png';
                        var data = new FormData();
                        data.append('file', file, name);

                        $.ajax('/oss/upload.json', {
                            data: data,
                            type: 'POST',
                            processData: false,
                            contentType: false
                        }).done(function (res) {
                            if (res.code == 200) {
                                $('#' + field_name).val(res.data.url);
                            } else {
                                alert(res.message);
                            }
                        }).fail(function (xhr) {
                            if (xhr.responseText) {
                                alert(xhr.responseText);
                            }
                        });
                    });
             }
            },
        };
    },
    methods: {
    },
    mounted() {
       
    },
    created() {
    }
};

</script>

<style  lang="less">
#tinymce {
    position: relative;
    z-index: 0;
    margin-bottom: 50px;
    .w-e-text-container{
        height: 500px!important;
        resize: vertical;
    }
}
</style>

tinymce.get('tinymce').getContent()可以获取编辑器的内容