2021-03-11 quill editor实现@功能(富文本at功能)

Posted 2023-03-17

参考技术A 所用插件：vue-quill-editor
版本("vue-quill-editor": "^3.0.6", "quill": "^1.3.7",)
文档参考：

实现思路：

带着这样的问题，我们开始：

这样就很优秀了嘛！

时间有限，文章写的有点偏口语化，之后有时间会再整理一下。
需要源文件请私我

Vue使用vue-quill-editor实现富文本需求

Quill富文本编辑器
简单记录

一，组件中引入
import { quillEditor } from \'vue-quill-editor\'
样式文件引入
import \'quill/dist/quill.core.css\'
import \'quill/dist/quill.snow.css\'

将quillEditor 注册为组件，并写出标签

<quill-editor
      class="editor"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
      :value="content"
      :options="editorOption"
    />

editorOption: {
//此处设置quill的一些属性和其模块属性
        placeholder: \'占位占位占位\',
        modules: {
          toolbar: {
            container: toolbarOptions,
            theme: \'snow\'
            handlers: {
            //此处定义toolbar上按钮的行为
              \'image\': (value) => {
                //用户点击了toolbar的图片按钮之后的行为
              },
              \'link\': (value) => {
                //用户点击了toolbar的link按钮之后的行为
              }
            }
          }
        }
}

onEditorReady (quill) {
      this.quill = quill
      }
onEditorChange ({ quill, html, text }) {
      //处理富文本内容
    }