npm install vue-quill-editor@beta quill

<template>
  <div class="editor-container">
    <quill-editor 
      v-model:content="content" 
      contentType="html"
      :options="editorOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { QuillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.snow.css';

const content = ref('<p>初始编辑内容</p>');

const editorOptions = ref({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image']
    ]
  },
  placeholder: '请输入内容...',
});
</script>

<style scoped>
.editor-container {
  max-width: 800px;
  margin: 20px auto;
}
</style>

const getEditorContent = () => {
  console.log(content.value); // 获取HTML格式内容
};

editorOptions.value.modules.toolbar.handlers = {
  image: function() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.click();
    
    input.onchange = async () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append('image', file);
      
      // 替换为实际api地址
      const { url } = await uploadApi(formData); 
      const quill = this.quill;
      const range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', url);
    };
  }
}

import 'quill/dist/quill.snow.css';

npm install @types/quill -D

toolbar: [
  ['bold', 'italic'], 
  ['blockquote', 'code-block'],
  [{ 'color': [] }, { 'background': [] }]
]

import { onUnmounted } from 'vue';

onUnmounted(() => {
  if (window.Quill) {
    delete window.Quill;
  }
});

@media (max-width: 768px) {
  .ql-toolbar {
    flex-wrap: wrap;
    height: auto !important;
  }
}