vue3如何实现编辑器功能

先看效果图

1.首先，您需要安装Quill编辑器。您可以使用 npm 或 yarn 来安装 Quill 编辑器的 Vue 组件。

npm install vue-quill-editor

 2.然后，在您的 Vue 组件中引入 Quill 编辑器

          
          <quill-editor
            ref="quills"
            v-model:content="formData.info"
            contentType="html"
            :options="editorOption"
            :style="{ height: sendHeight + 'px' }"
          >
          </quill-editor>
          <input
              type="file"
              accept=".png,.jpg,.jpeg"
              @change="productParaImgsChange"
              id="productParaImgsUpload"
              style="display: none;
             border: 4px solid red"
          />

//js部分

import { QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const productParaImgsChange = async (e) => {
  if(e.target.files.length === 0) {
    return;
  }
  let file = e.target.files[0]; // 固定写法，可自行打印查看
  const params = {
    type: 'email',
    uploadFile: [file]
  }
  let res = await ApiBusiType.caseControl.ossUpload(params);
  console.log(res.value);
  let quill = quills.value.getQuill() // 获取这个富文本的光标
  //光标位置
  let length = quill.getSelection().index;
  quill.insertEmbed(length, "image", res.value);  
  // 调整光标内容后面
  quill.setSelection(length + 1); 
}

3.最后，您可以根据您的需求配置 Quill 编辑器，如添加工具栏选项、自定义样式等。您可以查阅 Quill 编辑器的文档来了解更多配置选项和功能。