在vue-element-admin使用富文本编译---vue-quill-editor

1.安装:

npm install vue-quill-editor --save

2.页面中引用

  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

3.组件注册

components: {
      quillEditor
    },

4.页面使用

 <el-form-item label="内容" prop="content">
          <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          />
        </el-form-item>

5.绑定事件

 // 富文本失去焦点事件
    onEditorBlur(e) {
      console.log("失去焦点", e);
    },
    // 富文本获得焦点事件
    onEditorFocus(e) {
      console.log("获得焦点", e);
    },
    // 富文本内容改变事件
    onEditorChange(e) {
      console.log("内容改变", e);
    },

 参考链接:https://developer.baidu.com/article/detail.html?id=5222126

参考链接:https://blog.csdn.net/weixin_44439817/article/details/147061236

posted @ 2025-12-24 16:03  李笑吅  阅读(3)  评论(0)    收藏  举报