CRM系统前端
查看 | 历史 | 提交 | 提交对比
Sanakey
5 天以前 2af71bcf522c485ea005184c977986374a7dcc4a
提交 | 用户 | age
c0e4c9 1 <template>
3ad1a4 2   <div :class="prefixCls" :style="{ width: containerWidth }">
128809 3     <textarea
H 4       :id="tinymceId"
5       ref="elRef"
6       :style="{ visibility: 'hidden' }"
7       v-if="!initOptions.inline"
8     ></textarea>
8e0137 9     <slot v-else></slot>
170f4d 10     <div class="p-2 tox-statusbar">
128809 11       <a-upload
67287b 12         v-if="isElse"
128809 13         v-model:file-list="fileListTemp"
H 14         action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
15         list-type="picture"
16         class="upload-list-inline"
17       >
18         <a-button type="text" size="small" style="margin: 0 auto">
19           <upload-outlined></upload-outlined>
20           附件
21         </a-button>
22         <template #iconRender><PaperClipOutlined /></template>
23         <template #itemRender="{ file, fileList, actions }">
24           <a-space class="ant-upload-list-picture-card">
67287b 25             <span style="display: flex; flex-wrap: wrap">
128809 26               <PaperClipOutlined style="margin-right: 4px" />
67287b 27               <span v-if="!file.editor" :style="file.status === 'error' ? 'color: red' : ''">{{
H 28                 file.name
29               }}</span>
30               <span v-else>
128809 31                 <a-input size="small" v-model:value="file.tempName"></a-input>
H 32               </span>
33             </span>
67287b 34             <span v-if="!file.editor">
128809 35               <a href="javascript:;" @click="actions.preview">预览</a>
H 36               <a href="javascript:;" @click="fnRename(file, fileList)">重命名</a>
37               <a href="javascript:;" @click="actions.remove">删除</a>
38             </span>
67287b 39             <span v-else>
128809 40               <a href="javascript:;" @click="fnSaveRename(file, fileList)">保存</a>
H 41               <a href="javascript:;" @click="fnOffRename(file, fileList)">取消</a>
42             </span>
43           </a-space>
44         </template>
45       </a-upload>
67287b 46       <div :class="fileListTemp.length > 0 ? 'my-upload-list' : ''">
128809 47         <div style="display: flex">
H 48           <ImgUpload
49             :fullscreen="fullscreen"
50             @uploading="handleImageUploading"
51             @done="handleDone"
67287b 52             v-if="isImg"
128809 53             v-show="editorRef"
H 54             :title="'图片'"
55             :disabled="disabled"
56             :accept="'.jpg,.jpeg,.gif,.png,.webp'"
57           />
67287b 58           <a-button v-if="isText" type="text" size="small">
128809 59             <SnippetsOutlined />
H 60             快速文本</a-button
61           >
62         </div>
63       </div>
170f4d 64     </div>
c0e4c9 65   </div>
J 66 </template>
67
bab28a 68 <script lang="ts" setup>
128809 69   import type { Editor, RawEditorSettings } from 'tinymce';
H 70   import { PaperClipOutlined, UploadOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
71   import tinymce from 'tinymce/tinymce';
72   import 'tinymce/themes/silver';
73   import 'tinymce/icons/default/icons';
74   import 'tinymce/plugins/advlist';
75   import 'tinymce/plugins/anchor';
76   import 'tinymce/plugins/autolink';
77   import 'tinymce/plugins/autosave';
78   import 'tinymce/plugins/code';
79   import 'tinymce/plugins/codesample';
80   import 'tinymce/plugins/directionality';
81   import 'tinymce/plugins/fullscreen';
82   import 'tinymce/plugins/hr';
83   import 'tinymce/plugins/insertdatetime';
84   import 'tinymce/plugins/link';
85   import 'tinymce/plugins/lists';
86   import 'tinymce/plugins/media';
87   import 'tinymce/plugins/nonbreaking';
88   import 'tinymce/plugins/noneditable';
89   import 'tinymce/plugins/pagebreak';
90   import 'tinymce/plugins/paste';
91   import 'tinymce/plugins/preview';
92   import 'tinymce/plugins/print';
93   import 'tinymce/plugins/save';
94   import 'tinymce/plugins/searchreplace';
95   import 'tinymce/plugins/spellchecker';
96   import 'tinymce/plugins/tabfocus';
97   // import 'tinymce/plugins/table';
98   import 'tinymce/plugins/template';
99   import 'tinymce/plugins/textpattern';
100   import 'tinymce/plugins/visualblocks';
101   import 'tinymce/plugins/visualchars';
102   import 'tinymce/plugins/wordcount';
a81268 103
128809 104   import 'tinymce/plugins/image';
H 105   import 'tinymce/plugins/table';
106   import 'tinymce/plugins/charmap';
107   import 'tinymce/plugins/imagetools';
108   import 'tinymce/plugins/help';
109   import 'tinymce/plugins/emoticons';
110   import 'tinymce/plugins/emoticons/js/emojis';
111   // import 'tinymce/plugins/bdmap';
112   // import 'tinymce/plugins/indent2em';
113   import 'tinymce/plugins/autoresize';
114   // import 'tinymce/plugins/formatpainter';
115   // import 'tinymce/plugins/axupimgs';
28c484 116
128809 117   // import 'tinymce/plugins/powerpaste';
H 118   // import 'tinymce/plugins/casechange';
119   import 'tinymce/plugins/importcss';
120   // import 'tinymce/plugins/tinyddrive';
121   // import 'tinymce/plugins/advcode';
122   // import 'tinymce/plugins/mediaembed';
123   import 'tinymce/plugins/toc';
124   // import 'tinymce/plugins/checklist';
125   // import 'tinymce/plugins/tinycespellchecker';
126   // import 'tinymce/plugins/a11ychecker';
127   // import 'tinymce/plugins/permanentpen';
128   // import 'tinymce/plugins/pageembed';
129   // import 'tinymce/plugins/tinycomments';
130   // import 'tinymce/plugins/mentions';
131   import 'tinymce/plugins/quickbars';
132   // import 'tinymce/plugins/linkchecker';
133   // import 'tinymce/plugins/advtable';
134   // import 'tinymce/plugins/export';
28c484 135
128809 136   import {
H 137     computed,
138     nextTick,
139     ref,
140     unref,
141     watch,
142     onDeactivated,
143     onBeforeUnmount,
144     PropType,
145     useAttrs,
146   } from 'vue';
147   import ImgUpload from './ImgUpload.vue';
148   import {
149     plugins as defaultPlugins,
150     toolbar as defaultToolbar,
151     toolbar_groups as defaultStyleFormats,
152   } from './tinymce';
153   import { buildShortUUID } from '@/utils/uuid';
154   import { bindHandlers } from './helper';
155   import { onMountedOrActivated } from '@vben/hooks';
156   import { useDesign } from '@/hooks/web/useDesign';
157   import { isNumber } from '@/utils/is';
158   import { useLocale } from '@/locales/useLocale';
159   import { useAppStore } from '@/store/modules/app';
f75425 160
128809 161   defineOptions({ name: 'Tinymce', inheritAttrs: false });
bab28a 162
128809 163   const props = defineProps({
H 164     options: {
165       type: Object as PropType<Partial<RawEditorSettings>>,
166       default: () => ({}),
39d629 167     },
128809 168     value: {
H 169       type: String,
170     },
39d629 171
128809 172     toolbar: {
H 173       type: Array as PropType<string[]>,
174       default: defaultToolbar,
175     },
176     plugins: {
177       type: Array as PropType<string[]>,
178       default: defaultPlugins,
179     },
180     toolbar_groups: {
181       type: Object as PropType<{}>,
182       default: defaultStyleFormats,
183     },
184     modelValue: {
185       type: String,
186     },
187     height: {
188       type: [Number, String] as PropType<string | number>,
189       required: false,
190       default: 400,
191     },
192     width: {
193       type: [Number, String] as PropType<string | number>,
194       required: false,
195       default: 'auto',
196     },
197     showImageUpload: {
198       type: Boolean,
199       default: true,
200     },
201     fontsize: {
202       type: String,
67287b 203     },
H 204     isElse: {
205       type: Boolean,
206       default: true,
207     },
208     isText: {
209       type: Boolean,
210       default: true,
211     },
212     isImg: {
213       type: Boolean,
214       default: true,
128809 215     },
H 216   });
217
218   const emit = defineEmits(['change', 'update:modelValue', 'inited', 'init-error']);
219
220   const attrs = useAttrs();
221   const editorRef = ref<Editor | null>(null);
222   const fullscreen = ref(false);
223   const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
224   const elRef = ref<HTMLElement | null>(null);
225
226   const { prefixCls } = useDesign('tinymce-container');
227
228   const appStore = useAppStore();
229
230   const containerWidth = computed(() => {
231     const width = props.width;
232     if (isNumber(width)) {
233       return `${width}px`;
234     }
235     return width;
236   });
237
238   const skinName = computed(() => {
239     return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
240   });
241
242   const langName = computed(() => {
243     const lang = useLocale().getLocale.value;
244     return ['zh_CN', ''].includes(lang) ? lang : 'zh_CN';
245   });
246
247   const initOptions = computed((): RawEditorSettings => {
248     const { height, options, toolbar, plugins, toolbar_groups } = props;
249
250     const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
251     return {
252       selector: `#${unref(tinymceId)}`,
253       height,
254       min_height: 450,
255       font_formats:
256         '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
257       fontsize_formats: '10px 11px 12px 14px 16px 18px 24px 36px 48px 48px 56px 72px',
258       image_advtab: true,
259       importcss_append: true, // 允许样式生效
260       toolbar,
261       toolbar_groups,
262       toolbar_sticky: true, // 粘性工具栏（或停靠工具栏），在向下滚动网页直到不再可见编辑器时，将工具栏和菜单停靠在屏幕顶部
263       toolbar_mode: 'floating', //默认wrap不收缩工具栏，取值为floating或sliding时，将第一行放不下的工具栏按钮缩进抽屉（3个点的图标）里，scrolling则采用移动端的横线滚动方式。
264       // style_formats_autohide: true,
265       menubar: false,
266       branding: false,
267       elementpath: false,
268       // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
269       plugins,
270       language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
271       language: langName.value,
272       default_link_target: '_blank',
273       link_title: false,
274       statusbar: false,
275       object_resizing: false,
276       auto_focus: true, //让编辑器加载完成后自动获得光标焦点
277       autosave_ask_before_unload: true,
278       autosave_interval: '30s',
279       skin: skinName.value,
280       skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
281       content_css: publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
282       ...options,
283       setup: (editor: Editor) => {
284         editorRef.value = editor;
285         editor.on('init', (e) => initSetup(e));
286       },
287     };
288   });
289
290   const disabled = computed(() => {
291     const { options } = props;
292     const getdDisabled = options && Reflect.get(options, 'readonly');
293     const editor = unref(editorRef);
294     if (editor) {
295       editor.setMode(getdDisabled ? 'readonly' : 'design');
296     }
297     return getdDisabled ?? false;
298   });
299
300   watch(
301     () => attrs.disabled,
302     () => {
303       const editor = unref(editorRef);
304       if (!editor) {
305         return;
306       }
307       editor.setMode(attrs.disabled ? 'readonly' : 'design');
308     },
309   );
310
311   onMountedOrActivated(() => {
312     if (!initOptions.value.inline) {
313       tinymceId.value = buildShortUUID('tiny-vue');
314     }
315     nextTick(() => {
316       setTimeout(() => {
317         initEditor();
318       }, 30);
319     });
320   });
321
322   onBeforeUnmount(() => {
323     destory();
324   });
325
326   onDeactivated(() => {
327     destory();
328   });
329
330   function destory() {
331     if (tinymce !== null) {
332       tinymce?.remove?.(unref(initOptions).selector!);
333     }
170f4d 334   }
bab28a 335
128809 336   function initEditor() {
H 337     const el = unref(elRef);
338     if (el) {
339       el.style.visibility = '';
340     }
341     tinymce
342       .init(unref(initOptions))
343       .then((editor) => {
344         emit('inited', editor);
345       })
346       .catch((err) => {
347         emit('init-error', err);
348       });
349   }
350
351   function initSetup(e) {
bab28a 352     const editor = unref(editorRef);
170f4d 353     if (!editor) {
H 354       return;
bab28a 355     }
128809 356     const value = props.modelValue || '';
170f4d 357
128809 358     editor.setContent(value);
H 359     bindModelHandlers(editor);
360     bindHandlers(e, attrs, unref(editorRef));
170f4d 361   }
H 362
128809 363   function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
H 364     if (
365       editor &&
366       typeof val === 'string' &&
367       val !== prevVal &&
368       val !== editor.getContent({ format: attrs.outputFormat })
369     ) {
370       editor.setContent(val);
371     }
170f4d 372   }
H 373
128809 374   function bindModelHandlers(editor: any) {
H 375     const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
376     const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
377
378     watch(
379       () => props.modelValue,
380       (val, prevVal) => {
381         setValue(editor, val, prevVal);
382       },
383     );
384
385     watch(
386       () => props.value,
387       (val, prevVal) => {
388         setValue(editor, val, prevVal);
389       },
390       {
391         immediate: true,
392       },
393     );
394
395     editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
396       const content = editor.getContent({ format: attrs.outputFormat });
397       emit('update:modelValue', content);
398       const data = {
399         content,
67287b 400         fileUNID: fileListTemp.value,
H 401       };
128809 402       emit('change', data);
170f4d 403     });
H 404
128809 405     editor.on('FullscreenStateChanged', (e) => {
H 406       fullscreen.value = e.state;
407     });
170f4d 408   }
H 409
128809 410   function handleImageUploading(name: string) {
H 411     const editor = unref(editorRef);
412     if (!editor) {
413       return;
414     }
415     editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
416     const content = editor?.getContent() ?? '';
417     setValue(editor, content);
170f4d 418   }
H 419
128809 420   function handleDone(name: string, url: string) {
H 421     const editor = unref(editorRef);
422     if (!editor) {
423       return;
424     }
425     const content = editor?.getContent() ?? '';
426     const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
427     setValue(editor, val);
428   }
bab28a 429
128809 430   function getUploadingImgName(name: string) {
H 431     return `[uploading:${name}]`;
432   }
bab28a 433
128809 434   // 附件
H 435   const fileListTemp = ref<UploadProps['fileList']>([
67287b 436     // {
H 437     //   uid: '-1',
438     //   name: 'xxx.png',
439     //   tempName: 'xxx',
440     //   status: 'done',
441     //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
442     //   thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
443     //   editor: false,
444     // },
445     // {
446     //   uid: '-2',
447     //   name: 'yyy.png',
448     //   tempName: 'yyy',
449     //   status: 'done',
450     //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
451     //   thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
452     //   editor: false,
453     // },
128809 454   ]);
H 455   function fnRename(file, fileList) {
456     console.log(file, fileList);
457     fileListTemp.value = fileList.map((item) => {
458       // item.tempName = item.name.split('.').slice(0,-1)
459       if (file.uid == item.uid) {
460         item.editor = true;
461       } else {
462         item.editor = false;
463       }
67287b 464       return item;
128809 465     });
bab28a 466   }
128809 467   function fnSaveRename(file, fileList) {
H 468     fileListTemp.value = fileList.map((item) => {
469       if (file.uid == item.uid) {
67287b 470         item.name = item.tempName;
128809 471         item.editor = false;
H 472       }
67287b 473       return item;
128809 474     });
bab28a 475   }
67287b 476   function fnOffRename(file, fileList) {
128809 477     fileListTemp.value = fileList.map((item) => {
H 478       if (file.uid == item.uid) {
479         item.editor = false;
480       }
67287b 481       return item;
128809 482     });
H 483   }
c0e4c9 484 </script>
128809 485 <style lang="less" scope>
H 486   @prefix-cls: ~'@{namespace}-tinymce-container';
3ad1a4 487
128809 488   .@{prefix-cls} {
H 489     position: relative;
490     line-height: normal;
c0e4c9 491
128809 492     textarea {
H 493       visibility: hidden;
494       z-index: -1;
495     }
c0e4c9 496   }
170f4d 497
67287b 498   .my-upload-list {
H 499     // 过渡
500     position: absolute;
501     left: 78px;
502     transition: all 0.3s;
503   }
504
128809 505   .tox-statusbar {
H 506     display: flex;
507     // position: absolute;
67287b 508     min-height: 40px;
128809 509     border-bottom-right-radius: 8px;
H 510     border-bottom-left-radius: 8px;
511     background: #f0f2f5;
512   }
170f4d 513
128809 514   .icon-text {
H 515     margin-right: 10px;
516     font-size: 14px;
517   }
518
519   .ant-upload-list-picture {
520     display: flex;
00fe0e 521     flex-wrap: wrap;
128809 522   }
H 523
524   .ant-upload-list-picture-card {
525     display: flex;
526     justify-content: space-between;
527     width: 24vw;
528     margin-right: 10px;
529     padding: 5px 10px;
530     background-color: #edf3f9;
531
532     a {
533       padding: 0 5px;
534       font-size: 12px;
535     }
536   }
c0e4c9 537 </style>