vue中button不改变框的大小改变里面字体的大小_vue-quill-editor 与 vant配合使用富文本编辑器...

最新推荐文章于 2024-03-14 14:57:32 发布

weixin_39837105

最新推荐文章于 2024-03-14 14:57:32 发布

阅读量782

点赞数

文章标签： vue中button不改变框的大小改变里面字体的大小

本文链接：https://blog.csdn.net/weixin_39837105/article/details/113668698

版权

本文介绍了如何在Vue项目中安装和使用vue-quill-editor，结合Vant实现富文本编辑器功能。通过在main.js全局引入组件，并展示使用代码示例。同时，提到了在使用过程中遇到的坑，如空格转换和表格支持问题。

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

首先使用 npm i vue-quill-editor -save 安装vue-quill-editor

第二、我们新建一个.vue文件存放当前的富文本编辑器，这里我会使用全局组件使用引入，当然，你也可以使用局部组件，使用方式相同，废话不多说，直接贴代码，这个使用vant图片上传，因为vue-quill-editor在ios是点不开的

<!--  模板 -->
<template>
  <div class="editor">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="options"
      :disabled="redact"
      @change="onEditorChange($event)"
    ></quill-editor>
    <van-uploader v-show="false" :afterRead="afterRead" :beforeRead="beforeRead">
      <van-button icon="photo" type="primary">上传图片</van-button>
    </van-uploader>
  </div>
  <!-- <div class="ql-editor" v-html="content"></div> -->
</template>

<script>
import "quill/dist/quill.core.css"; //引入样式
import "quill/dist/quill.snow.css";//引入样式
import "quill/dist/quill.bubble.css";//引入样式

import {
     quillEditor } from "vue-quill-editor";//引入组件
export default {
    
  name: "quillEditors",
  props: {