vue中使用富文本编辑器

最新推荐文章于 2024-05-05 22:52:42 发布

Sun.sir

最新推荐文章于 2024-05-05 22:52:42 发布

阅读量913

点赞数

本文链接：https://blog.csdn.net/yu923023913/article/details/106775050

版权

本文档介绍了在Vue项目中如何使用Quill富文本编辑器，特别是在element-ui-admin环境中。通过下载依赖并在组件中引入，可以实现富文本编辑功能。同时，提供了element-ui-admin官方文档的链接，供参考其他富文本编辑器如TinyMCE的集成方法。

摘要由CSDN通过智能技术生成

vue中使用quill富文本编辑器

下载依赖

npm i quill -S
npm i vue-quill-editor -S

直接在组件中，或页面中使用，代码
注意：我的提交按钮用了element-ui组件库的提示组件

<template>
  <div class="edii_page">
    <!-- 富文本编辑器 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- 提交按钮 -->
    <el-button
      type="primary"
      @click="onSubmit"
    >提交</el-button>
  </div>

</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import &#