在vue中使用tinymce组件

忘是亡心i 2021-11-13 22:58 692阅读 0赞

第一步：安装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()可以获取编辑器的内容

转载于:https://www.cnblogs.com/guidan/p/9238518.html