| 提交 | 用户 | 时间 | ||
| 759b1c | 1 | <template> |
| H | 2 | <textarea :id="tinymceId" style="visibility: hidden" /> |
| 3 | </template> | |
| 4 | ||
| 5 | <script> | |
| 6 | import loadTinymce from '@/utils/loadTinymce' | |
| 7 | import { plugins, toolbar } from './config' | |
| 8 | import { debounce } from 'throttle-debounce' | |
| 9 | ||
| 10 | let num = 1 | |
| 11 | ||
| 12 | export default { | |
| 13 | props: { | |
| 14 | id: { | |
| 15 | type: String, | |
| 16 | default: () => { | |
| 17 | num === 10000 && (num = 1) | |
| 18 | return `tinymce${+new Date()}${num++}` | |
| 19 | } | |
| 20 | }, | |
| 21 | value: { | |
| 22 | default: '' | |
| 23 | } | |
| 24 | }, | |
| 25 | data() { | |
| 26 | return { | |
| 27 | tinymceId: this.id | |
| 28 | } | |
| 29 | }, | |
| 30 | mounted() { | |
| 31 | loadTinymce(tinymce => { | |
| 32 | // eslint-disable-next-line global-require | |
| 33 | require('./zh_CN') | |
| 34 | let conf = { | |
| 35 | selector: `#${this.tinymceId}`, | |
| 36 | language: 'zh_CN', | |
| 37 | menubar: 'file edit insert view format table', | |
| 38 | plugins, | |
| 39 | toolbar, | |
| 40 | height: 300, | |
| 41 | branding: false, | |
| 42 | object_resizing: false, | |
| 43 | end_container_on_empty_block: true, | |
| 44 | powerpaste_word_import: 'clean', | |
| 45 | code_dialog_height: 450, | |
| 46 | code_dialog_width: 1000, | |
| 47 | advlist_bullet_styles: 'square', | |
| 48 | advlist_number_styles: 'default', | |
| 49 | default_link_target: '_blank', | |
| 50 | link_title: false, | |
| 51 | nonbreaking_force_tab: true | |
| 52 | } | |
| 53 | conf = Object.assign(conf, this.$attrs) | |
| 54 | conf.init_instance_callback = editor => { | |
| 55 | if (this.value) editor.setContent(this.value) | |
| 56 | this.vModel(editor) | |
| 57 | } | |
| 58 | tinymce.init(conf) | |
| 59 | }) | |
| 60 | }, | |
| 61 | destroyed() { | |
| 62 | this.destroyTinymce() | |
| 63 | }, | |
| 64 | methods: { | |
| 65 | vModel(editor) { | |
| 66 | // 控制连续写入时setContent的触发频率 | |
| 67 | const debounceSetContent = debounce(250, editor.setContent) | |
| 68 | this.$watch('value', (val, prevVal) => { | |
| 69 | if (editor && val !== prevVal && val !== editor.getContent()) { | |
| 70 | if (typeof val !== 'string') val = val.toString() | |
| 71 | debounceSetContent.call(editor, val) | |
| 72 | } | |
| 73 | }) | |
| 74 | ||
| 75 | editor.on('change keyup undo redo', () => { | |
| 76 | this.$emit('input', editor.getContent()) | |
| 77 | }) | |
| 78 | }, | |
| 79 | destroyTinymce() { | |
| 80 | if (!window.tinymce) return | |
| 81 | const tinymce = window.tinymce.get(this.tinymceId) | |
| 82 | if (tinymce) { | |
| 83 | tinymce.destroy() | |
| 84 | } | |
| 85 | } | |
| 86 | } | |
| 87 | } | |
| 88 | </script> | |
