From 2a242c770f72f34aabca80b2233ccbecd2ebb759 Mon Sep 17 00:00:00 2001 From: dhb52 Date: Fri, 14 Apr 2023 14:49:19 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8Editor=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=9B=BF=E6=8D=A2WxEditor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 813e7d2776dc2f9bde7baa06ecac83cab8d2ff53) --- src/components/Editor/src/Editor.vue | 3 +- .../mp/components/wx-editor/WxEditor.vue | 104 ---- .../mp/components/wx-editor/quill-options.js | 45 -- src/views/mp/draft/editor-config.ts | 72 +++ src/views/mp/draft/index.vue | 458 +++++++++--------- 5 files changed, 307 insertions(+), 375 deletions(-) delete mode 100644 src/views/mp/components/wx-editor/WxEditor.vue delete mode 100644 src/views/mp/components/wx-editor/quill-options.js create mode 100644 src/views/mp/draft/editor-config.ts diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue index 4d8e7dde..2d723922 100644 --- a/src/components/Editor/src/Editor.vue +++ b/src/components/Editor/src/Editor.vue @@ -20,7 +20,7 @@ const props = defineProps({ editorId: propTypes.string.def('wangeEditor-1'), height: propTypes.oneOfType([Number, String]).def('500px'), editorConfig: { - type: Object as PropType, + type: Object as PropType>, default: () => undefined }, readonly: propTypes.bool.def(false), @@ -147,6 +147,7 @@ const editorConfig = computed((): IEditorConfig => { props.editorConfig || {} ) }) + const editorStyle = computed(() => { return { height: isNumber(props.height) ? `${props.height}px` : props.height diff --git a/src/views/mp/components/wx-editor/WxEditor.vue b/src/views/mp/components/wx-editor/WxEditor.vue deleted file mode 100644 index d2220e10..00000000 --- a/src/views/mp/components/wx-editor/WxEditor.vue +++ /dev/null @@ -1,104 +0,0 @@ - - - diff --git a/src/views/mp/components/wx-editor/quill-options.js b/src/views/mp/components/wx-editor/quill-options.js deleted file mode 100644 index 5ec211ae..00000000 --- a/src/views/mp/components/wx-editor/quill-options.js +++ /dev/null @@ -1,45 +0,0 @@ -const toolbarOptions = [ - ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 - ['blockquote', 'code-block'], // 引用 代码块 - [{ header: 1 }, { header: 2 }], // 1、2 级标题 - [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 - [{ script: 'sub' }, { script: 'super' }], // 上标/下标 - [{ indent: '-1' }, { indent: '+1' }], // 缩进 - // [{'direction': 'rtl'}], // 文本方向 - [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 - [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 - [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 - [{ font: [] }], // 字体种类 - [{ align: [] }], // 对齐方式 - ['clean'], // 清除文本格式 - ['link', 'image', 'video'] // 链接、图片、视频 -] - -export default { - theme: 'snow', - placeholder: '请输入文章内容', - modules: { - toolbar: { - container: toolbarOptions, - // container: "#toolbar", - handlers: { - image: function (value) { - if (value) { - // 触发input框选择图片文件 - document.querySelector('.avatar-uploader input').click() - } else { - this.quill.format('image', false) - } - }, - link: function (value) { - if (value) { - const href = prompt('注意！只支持公众号图文链接') - this.quill.format('link', href) - } else { - this.quill.format('link', false) - } - } - } - } - } -} diff --git a/src/views/mp/draft/editor-config.ts b/src/views/mp/draft/editor-config.ts new file mode 100644 index 00000000..26c723c9 --- /dev/null +++ b/src/views/mp/draft/editor-config.ts @@ -0,0 +1,72 @@ +import { IEditorConfig } from '@wangeditor/editor' +import { getAccessToken, getTenantId } from '@/utils/auth' + +const message = useMessage() + +type InsertFnType = (url: string, alt: string, href: string) => void + +export const createEditorConfig = ( + server: string, + accountId: number | undefined +): Partial => { + return { + MENU_CONF: { + ['uploadImage']: { + server, + // 单个文件的最大体积限制，默认为 2M + maxFileSize: 5 * 1024 * 1024, + // 最多可上传几个文件，默认为 100 + maxNumberOfFiles: 10, + // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] + allowedFileTypes: ['image/*'], + + // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 + meta: { accountId: accountId }, + // 将 meta 拼接到 url 参数中，默认 false + metaWithUrl: true, + + // 自定义增加 http header + headers: { + Accept: '*', + Authorization: 'Bearer ' + getAccessToken(), + 'tenant-id': getTenantId() + }, + + // 跨域是否传递 cookie ，默认为 false + withCredentials: true, + + // 超时时间，默认为 10 秒 + timeout: 5 * 1000, // 5 秒 + + // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image + fieldName: 'file', + + // 上传之前触发 + onBeforeUpload(file: File) { + console.log(file) + return file + }, + // 上传进度的回调函数 + onProgress(progress: number) { + // progress 是 0-100 的数字 + console.log('progress', progress) + }, + onSuccess(file: File, res: any) { + console.log('onSuccess', file, res) + }, + onFailed(file: File, res: any) { + message.alertError(res.message) + console.log('onFailed', file, res) + }, + onError(file: File, err: any, res: any) { + message.alertError(err.message) + console.error('onError', file, err, res) + }, + // 自定义插入图片 + customInsert(res: any, insertFn: InsertFnType) { + insertFn(res.data, 'image', res.data) + } + } + } + } +} diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue index d9a44076..0cc70507 100644 --- a/src/views/mp/draft/index.vue +++ b/src/views/mp/draft/index.vue @@ -71,168 +71,182 @@ -
-
-
-
-
- -
{{ news.title }}
-
-
- 下移 - 删除 - -
-
-
-
-
{{ news.title }}
-
- + + +
+
+
+
+ +
{{ news.title }}
+
+
+ 下移 + 删除 +
-
- 下移 - - 上移 - 删除 - +
+
+
{{ news.title }}
+
+ +
+
+
+ 下移 + + 上移 + 删除 + +
-
- - - - - -
-
-
-
-
-
-
- - - - - -
封面和摘要：
-
-
- - -
- + - - 素材库选择 - - -
- - - + + +
- -
- - - - -
+ + +
+ + + + + + + + + +

封面:

+
+ + +
+ + + 素材库选择 + + +
+ + + +
+ + +

摘要:

+ + + + + + + +
+ + @@ -535,6 +554,13 @@ const handleDelete = async (item: any) => { padding-top: 5px; } +.el-row { + margin-bottom: 20px; +} +.el-row:last-child { + margin-bottom: 0; +} + .item-name { font-size: 12px; overflow: hidden; @@ -548,35 +574,33 @@ const handleDelete = async (item: any) => { } /*新增图文*/ -.left { - display: inline-block; - width: 35%; - vertical-align: top; - margin-top: 200px; -} +// .left { +// display: inline-block; +// vertical-align: top; +// margin-top: 200px; +// } -.right { - display: inline-block; - width: 60%; - margin-top: -40px; -} +// .right { +// display: inline-block; +// width: 100%; +// } -.avatar-uploader { - width: 20%; - display: inline-block; -} +// .avatar-uploader { +// width: 20%; +// display: inline-block; +// } -.avatar-uploader .el-upload { - border-radius: 6px; - cursor: pointer; - position: relative; - overflow: hidden; - text-align: unset !important; -} +// .avatar-uploader .el-upload { +// border-radius: 6px; +// cursor: pointer; +// position: relative; +// overflow: hidden; +// text-align: unset !important; +// } -.avatar-uploader .el-upload:hover { - border-color: #165dff; -} +// .avatar-uploader .el-upload:hover { +// border-color: #165dff; +// } .avatar-uploader-icon { border: 1px solid #d9d9d9; @@ -599,7 +623,7 @@ const handleDelete = async (item: any) => { } .digest { - width: 60%; + width: 100%; display: inline-block; vertical-align: top; } @@ -620,28 +644,16 @@ const handleDelete = async (item: any) => { border: 1px solid #eaeaea; } -p { - line-height: 30px; -} - @media (min-width: 992px) and (max-width: 1300px) { .waterfall { column-count: 3; } - - p { - color: red; - } } @media (min-width: 768px) and (max-width: 991px) { .waterfall { column-count: 2; } - - p { - color: orange; - } } @media (max-width: 767px) { @@ -707,10 +719,6 @@ p { background-color: #acadae; } -.input-tt { - padding: 5px; -} - .activeAddNews { border: 5px solid #2bb673; } @@ -747,7 +755,7 @@ p { .thumb-div { display: inline-block; - width: 30%; + width: 100%; text-align: center; }