1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| <template>
| <div>
| <editor
| id="tinymceEditor"
| api-key="iqoxulbfocn5ujzugfyum4xtowop2m08y5up2e0j2r1ue1gr"
| :init="tinymceInit"
| v-model="content"
| :key="tinymceFlag"
| ></editor>
| </div>
| </template>
| <script>
| import Editor from '@tinymce/tinymce-vue'
| import { post } from '@/lin/plugin/axios'
|
| export default {
| name: 'TinymceEditor',
| props: {
| defaultContent: {
| type: String,
| default: '',
| },
| height: {
| type: Number,
| default: 500,
| },
| width: {
| type: Number,
| default: undefined,
| },
| showMenubar: {
| type: Boolean,
| default: true,
| },
| toolbar: {
| type: String,
| default: ` undo redo
| | formatselect fontselect fontsizeselect lineheight
| | bold italic underline strikethrough forecolor backcolor formatpainter
| | insertdatetime superscript subscript hr
| | link image | alignleft aligncenter alignright alignjustify
| | numlist bullist outdent indent
| | removeformat
| | preview fullscreen code`,
| },
| },
| components: {
| Editor,
| },
| data() {
| return {
| content: '',
| tinymceFlag: 1,
| tinymceInit: {},
| }
| },
| created() {
| this.tinymceInit = {
| language: 'zh_CN',
| height: this.height,
| branding: true, // 去水印
| statusbar: false, // 隐藏编辑器底部的状态栏
| elementpath: false, // 禁用编辑器底部的状态栏
| toolbar: this.toolbar,
| paste_data_images: true, // 允许粘贴图像
| browser_spellcheck: true, // 拼写检查
| menubar: this.showMenubar, // 隐藏最上方menu
| plugins: `print fullpage searchreplace autolink directionality visualblocks
| visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime
| wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link`,
| async images_upload_handler(blobInfo, success, failure) {
| const file = new File([blobInfo.blob()], blobInfo.filename(), {
| type: 'image/*',
| })
| post('cms/file', { file })
| .then(res => {
| if (res.length && res[0]?.url) {
| success(res[0].url)
| }
| })
| .catch(err => failure(err))
| },
| }
| },
| mounted() {
| if (this.defaultContent) {
| this.content = this.defaultContent
| }
| },
| watch: {
| content: {
| handler() {
| this.$emit('change', this.content)
| },
| },
| defaultContent: {
| handler() {
| this.content = this.defaultContent
| },
| immediate: true,
| },
| },
| activated() {
| this.tinymceFlag++
| },
| }
| </script>
|
| <style lang="scss">
| .tox-notification {
| display: none !important;
| }
| </style>
|
|
