feat: 富文本调整

src/components/rich-editor/index-json.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="rich-editor">
+    <QuillEditor
+      ref="editorRef"
+      v-model:content="content"
+      theme="snow"
+      content-type="html"
+      :placeholder="placeholder"
+      :toolbar="toolbar"
+      @update:content="contentChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { QuillEditor } from '@vueup/vue-quill';
+  import '@vueup/vue-quill/dist/vue-quill.snow.css';
+  // import ImageResize from 'quill-image-resize-module';
+
+  import useParser from './useParser';
+  import useRender from './useRender';
+  import { RichTextJSON } from './types';
+
+  defineOptions({
+    name: 'RichEditor',
+  });
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue: string | RichTextJSON | null;
+      placeholder?: string;
+      autoEmit?: boolean;
+    }>(),
+    {
+      placeholder: '请输入',
+      autoEmit: false,
+    }
+  );
+  const emit = defineEmits(['update:modelValue', 'change']);
+
+  const toolbar = [
+    [
+      'bold',
+      'italic',
+      'underline',
+      { script: 'sub' },
+      { script: 'super' },
+      'image',
+    ],
+    ['clean'],
+  ];
+
+  // const modules = {
+  //   name: 'imageResize',
+  //   module: ImageResize,
+  //   options: {
+  //     modules: ['Resize'],
+  //   },
+  // };
+
+  const editorRef = ref();
+  const content = ref<string>('');
+
+  const { parseRichText } = useParser();
+  const { renderRichText } = useRender();
+
+  function contentChange() {
+    if (!props.autoEmit) return;
+    const valJson = getValJson();
+    emit('update:modelValue', valJson);
+    emit('change', valJson);
+  }
+
+  function getValJson() {
+    const editorContainer = editorRef.value.getEditor();
+    return parseRichText(editorContainer.childNodes[0]);
+  }
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      let valJson = {} as RichTextJSON;
+      if (val === null || val === '') {
+        valJson = { sections: [] };
+      } else if (typeof val === 'string') {
+        try {
+          valJson = JSON.parse(val);
+        } catch (error) {
+          console.error(error);
+          valJson = { sections: [] };
+        }
+      } else {
+        valJson = val;
+      }
+      content.value = renderRichText(valJson);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  defineExpose({ getValJson });
+</script>
+
+<style>
+  .rich-editor {
+    height: 400px;
+  }
+  .rich-editor em {
+    font-style: italic;
+  }
+</style>

src/components/rich-editor/index.vue

@@ -18,23 +18,17 @@
   import '@vueup/vue-quill/dist/vue-quill.snow.css';
   // import ImageResize from 'quill-image-resize-module';
 
-  import useParser from './useParser';
-  import useRender from './useRender';
-  import { RichTextJSON } from './types';
-
   defineOptions({
     name: 'RichEditor',
   });
 
   const props = withDefaults(
     defineProps<{
-      modelValue: string | RichTextJSON | null;
+      modelValue: string | null;
       placeholder?: string;
-      autoEmit?: boolean;
     }>(),
     {
       placeholder: '请输入',
-      autoEmit: false,
     }
   );
   const emit = defineEmits(['update:modelValue', 'change']);
@@ -44,10 +38,17 @@
       'bold',
       'italic',
       'underline',
+      'strike',
+      'link',
+      'image',
       { script: 'sub' },
       { script: 'super' },
-      'image',
+      { align: [] },
+      { indent: '-1' },
+      { indent: '+1' },
     ],
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ size: ['small', false, 'large', 'huge'] }],
     ['clean'],
   ];
 
@@ -62,45 +63,20 @@
   const editorRef = ref();
   const content = ref<string>('');
 
-  const { parseRichText } = useParser();
-  const { renderRichText } = useRender();
-
   function contentChange() {
-    if (!props.autoEmit) return;
-    const valJson = getValJson();
-    emit('update:modelValue', valJson);
-    emit('change', valJson);
-  }
-
-  function getValJson() {
-    const editorContainer = editorRef.value.getEditor();
-    return parseRichText(editorContainer.childNodes[0]);
+    emit('update:modelValue', content);
+    emit('change', content);
   }
 
   watch(
     () => props.modelValue,
     (val) => {
-      let valJson = {} as RichTextJSON;
-      if (val === null || val === '') {
-        valJson = { sections: [] };
-      } else if (typeof val === 'string') {
-        try {
-          valJson = JSON.parse(val);
-        } catch (error) {
-          console.error(error);
-          valJson = { sections: [] };
-        }
-      } else {
-        valJson = val;
-      }
-      content.value = renderRichText(valJson);
+      content.value = val || '';
     },
     {
       immediate: true,
     }
   );
-
-  defineExpose({ getValJson });
 </script>
 
 <style>

src/views/order/task-manage/noticeForm.vue

@@ -9,7 +9,6 @@
     >
       <a-form-item field="notice" label="考试说明" :content-flex="false">
         <rich-editor
-          ref="richEditorRef"
           v-model="formData.notice"
           placeholder="请输入"
           :max-length="999"
@@ -51,7 +50,6 @@
   };
   type FormDataType = typeof defaultFormData;
 
-  const richEditorRef = ref();
   const formRef = ref<FormInstance>();
   const formData = reactive<FormDataType>({ ...defaultFormData });
   const rules: Partial<Record<keyof FormDataType, FieldRule[]>> = {
@@ -75,10 +73,9 @@
 
     setLoading(true);
     let res = true;
-    formData.notice = richEditorRef.value.getValJson();
     await updateTaskNotice({
       id: formData.id,
-      notice: JSON.stringify(formData.notice),
+      notice: formData.notice,
     }).catch(() => {
       res = false;
     });