diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index ef9be84f..a06551ff 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -52,36 +52,45 @@ export default { } }, mounted() { - const _this = this - window.tinymce.init({ - selector: `#${this.tinymceId}`, - height: this.height, - body_class: 'panel-body ', - object_resizing: false, - toolbar: this.toolbar, - menubar: this.menubar, - plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools', - end_container_on_empty_block: true, - powerpaste_word_import: 'clean', - code_dialog_height: 450, - code_dialog_width: 1000, - advlist_bullet_styles: 'square', - advlist_number_styles: 'default', - block_formats: '普通标签=p;小标题=h2;', - imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'], - imagetools_toolbar: 'watermark', - default_link_target: '_blank', - link_title: false, - init_instance_callback: editor => { - if (_this.value) { - editor.setContent(_this.value) + this.initTinymce() + }, + activated() { + this.initTinymce() + }, + deactivated() { + this.destroyTinymce() + }, + methods: { + initTinymce() { + const _this = this + window.tinymce.init({ + selector: `#${this.tinymceId}`, + height: this.height, + body_class: 'panel-body ', + object_resizing: false, + toolbar: this.toolbar, + menubar: this.menubar, + plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools', + end_container_on_empty_block: true, + powerpaste_word_import: 'clean', + code_dialog_height: 450, + code_dialog_width: 1000, + advlist_bullet_styles: 'square', + advlist_number_styles: 'default', + imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'], + imagetools_toolbar: 'watermark', + default_link_target: '_blank', + link_title: false, + init_instance_callback: editor => { + if (_this.value) { + editor.setContent(_this.value) + } + _this.hasInit = true + editor.on('NodeChange Change KeyUp', () => { + this.hasChange = true + this.$emit('input', editor.getContent({ format: 'raw' })) + }) } - _this.hasInit = true - editor.on('NodeChange Change KeyUp', () => { - this.hasChange = true - this.$emit('input', editor.getContent({ format: 'raw' })) - }) - }, // 整合七牛上传 // images_dataimg_filter(img) { // setTimeout(() => { @@ -115,41 +124,11 @@ export default { // console.log(err); // }); // }, - setup(editor) { - editor.addButton('h2', { - title: '小标题', // tooltip text seen on mouseover - text: '小标题', - onclick() { - editor.execCommand('mceToggleFormat', false, 'h2') - }, - onPostRender() { - const btn = this - editor.on('init', () => { - editor.formatter.formatChanged('h2', state => { - btn.active(state) - }) - }) - } - }) - editor.addButton('p', { - title: '正文', - text: '正文', - onclick() { - editor.execCommand('mceToggleFormat', false, 'p') - }, - onPostRender() { - const btn = this - editor.on('init', () => { - editor.formatter.formatChanged('p', state => { - btn.active(state) - }) - }) - } - }) - } - }) - }, - methods: { + }) + }, + destroyTinymce() { + window.tinymce.get(this.tinymceId).destroy() + }, setContent(value) { window.tinymce.get(this.tinymceId).setContent(value) }, @@ -164,7 +143,7 @@ export default { } }, destroyed() { - window.tinymce.get(this.tinymceId).destroy() + this.destroyTinymce() } }