diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index ef9be84f2d96b9e4ec786fcde77ce625e0b9dcaf..a06551ff0212547abda322895bd2d18806c7fcc1 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() } } </script>