TinyMCE用法

1、将相关文件放置项目中

2、界面引用tinymce.min.js
3、界面标签

加载组件中…

4、js初始化tinymce

 property.addVm = new Vue({
                    el: elname,
                    data: {
                        addForm: resp,                        
                        spinShow2:true,
                    },
                    methods: {                        
                        submitAddForm: function (name) {
                            property.addVm.$refs[name].validate((valid) => {
                                if (valid) {                                       
                                    //内容    
                                   // property.addVm.$data.addForm.MessageContent = tinyMCE.editors[0].getContent();//如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）
                                    property.addVm.$data.addForm.MessageContent = tinyMCE.get('tinymceEditer').getContent();
                                    var vueData = JSON.stringify(property.addVm.$data.addForm); //新增数据                               
                                }
                            });
                        }
                        , init () {
                            this.$nextTick(() => {
                                var vm = this;
                                //var height = document.body.offsetHeight - 300;
                                var height = 600;
                                tinyMCE.init({
                                    selector: '#tinymceEditer',
                                    branding: false,
                                    elementpath: false,
                                    height: height,
                                    language: 'zh_CN.GB2312',
                                    menubar: 'edit insert view format table tools',
                                    plugins: [
                                        'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                                        'searchreplace visualblocks visualchars code fullpage',
                                        'insertdatetime media nonbreaking save table contextmenu directionality',
                                        'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                                    ],
                                    toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
                                    autosave_interval: '20s',
                                    image_advtab: true,
                                    table_default_styles: {
                                        width: '100%',
                                        borderCollapse: 'collapse'
                                    },
                                    setup: function (editor) {
                                        debugger;
                                        editor.on('init', function (e) {                                              
                                            vm.spinShow2 = false;                                             
                                            tinyMCE.get('tinymceEditer').setContent("");                                             
                                        });
                                        editor.on('keydown', function (e) {
                                            //如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）
                                            //获取内容：tinyMCE.editors[0].getContent()
                                            //设置内容：tinyMCE.editors[0].setContent("需要设置的编辑器内容")
                                            vm.addForm.MessageContent = tinyMCE.get('tinymceEditer').getContent();                                           
                                        });
                                    }
                                });
                            });
                        }
                    }, mounted () {                        
                        this.init();
                    },
                    destroyed () {                        
                        tinymce.get('tinymceEditer').destroy();
                    }              

                });