web-admin/src/components/rich-editor/index.vue

<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';

  defineOptions({
    name: 'RichEditor',
  });

  const props = withDefaults(
    defineProps<{
      modelValue: string | null;
      placeholder?: string;
    }>(),
    {
      placeholder: '请输入',
    }
  );
  const emit = defineEmits(['update:modelValue', 'change']);

  const toolbar = [
    [
      'bold',
      'italic',
      'underline',
      'strike',
      'link',
      'image',
      { script: 'sub' },
      { script: 'super' },
      { align: [] },
      { indent: '-1' },
      { indent: '+1' },
    ],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ size: ['small', false, 'large', 'huge'] }],
    ['clean'],
  ];

  // const modules = {
  //   name: 'imageResize',
  //   module: ImageResize,
  //   options: {
  //     modules: ['Resize'],
  //   },
  // };

  const editorRef = ref();
  const content = ref<string>('');

  function contentChange() {
    emit('update:modelValue', content);
    emit('change', content);
  }

  watch(
    () => props.modelValue,
    (val) => {
      content.value = val || '';
    },
    {
      immediate: true,
    }
  );
</script>

<style>
  .rich-editor .ql-container {
    height: 300px;
  }
  .rich-editor em {
    font-style: italic;
  }
</style>