富文本组件的封装：使用vue-quill-editor插件

最新推荐文章于 2024-08-09 07:00:42 发布
最新推荐文章于 2024-08-09 07:00:42 发布
阅读量336 收藏
点赞数
分类专栏： 笔记 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttianye/article/details/120207242
版权

Editor组件代码

<template>
  <div class="box">
    <el-upload
      style="display: none"
      class="avatar"
      :action="uploadPath"
      :headers="headers"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      accept=".jpg,.jpeg,.png,.gif"
    >
    </el-upload>
    <el-upload
      :show-file-list="false"
      :on-success="handleFileSuccess"
      :before-upoad="handleFileBeforeUpload"
      type="drag"
      :headers="headers"
      :action="uploadPath"
      class="uploadFile"
    ></el-upload>
    <quill-editor
      class="ql-editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
import { Quill } from "vue-quill-editor";
import "../../../node_modules/quill/dist/quill.snow.css";
import { getToken } from "@/utils/auth";//请求头
import { getStore } from "@/utils/storage";//请求头
import { addQuillTitle } from "@/utils/quill/quill-title.js";
import { lineHeightStyle } from "@/utils/quill/lineHeight";
import ImageResize from "quill-image-resize-module"; // 引用，调整图片大小
Quill.register("modules/imageResize", ImageResize);

// 自定义插入a链接
var Link = Quill.import("formats/link");
class FileBlot extends Link {
  // 继承Link Blot
  static create(value) {
    let node = undefined;
    if (value && !value.href) {
      // 适应原本的Link Blot
      node = super.create(value);
    } else {
      // 自定义Link Blot
      node = super.create(value.href);
      node.setAttribute("download", value.innerText); // 左键点击即下载
      node.innerText = value.innerText;
      node.download = value.innerText;
    }
    return node;
  }
}
FileBlot.blotName = "link";
FileBlot.tagName = "A";
Quill.register(FileBlot);

let fonts = [
  "MicrosoftYaHei",
  "SimSun",
  "SimHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "TimesNewRoman",
  "sansSerif",
];
Quill.imports["formats/font"].whitelist = fonts;
Quill.register(Quill.imports["formats/font"]);

let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["16px", "20px", "24px", "30px", "36px", "42px"];
Quill.register(fontSizeStyle, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 切换按钮
  [{ header: 1 }, { header: 2 }], //自定义按钮的值
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }], //缩进
  [{ direction: "rtl" }], // 文本方向
  [{ size: fontSizeStyle.whitelist }], //自定义字号
  [{ lineheight: ["initial", "1", "1.5", "1.75", "2", "3", "4", "5"] }], // 行高
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }], // 下拉菜单，带有主题的默认值
  [{ font: fonts }],
  [{ align: [] }],
  ["link", "image", "upload"],
  ["clean"],
];
Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

export default {
  name: "Editor",
  components: { Quill },
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
    },
    /* 图片大小 */
    maxSize: {
      type: Number,
      default: 4000, //kb
    },
  },
  data() {
    return {
      content: this.value,
      uploadPath: "",
      editorOption: {
        placeholder: "",
        theme: "snow", //	bubble/snow
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".avatar input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
              upload: (value) => {
                if (value) {
                  document.querySelector(".uploadFile input").click();
                }
              },
              lineheight: function (value) {
                if (value) {
                  this.quill.format("lineHeight", value);
                } else {
                  console.log(value);
                }
              },
            },
          },
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
      },
      uploadPath: process.env.VUE_APP_BASE_API + "/common/upload/file", // 上传的图片服务器地址
      headers: {
        // 请求头
        Authorization: getToken() ? getToken() : getStore("h5Token"),
      },
    };
  },
  watch: {
    value: function () {
      this.content = this.value;
    },
  },
  mounted() {
    addQuillTitle();
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {},
    handleAvatarSuccess(res, file) {
      this.form.thumbnail = res.data;
      this.thumbnail = res.data;
    },
    uploadSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.status == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片 res.data为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.data.full);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading动画消失
      this.quillUpdateImg = false;
    },
    handleFileSuccess(res, file) {
      let fileNameLength = file.name.length;
      let quill = this.$refs.myQuillEditor.quill;
      let length = quill.getSelection().index;
      quill.insertEmbed(
        length,
        "link",
        { href: res.data.full, innerText: file.name },
        "api"
      );
      quill.setSelection(length + fileNameLength);
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    // 富文本图片上传前
    beforeUpload() {
      // 显示loading动画
      this.quillUpdateImg = true;
    },
    handleFileBeforeUpload() {
      // 显示loading动画
      this.quillUploadFile = true;
    },
    onEditorChange({ editor, html, text }) {
      //内容改变事件
      this.$emit("input", html);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
  },
};
</script> 

<style >
@import "../../assets/styles/font.css";
.box {
  margin-top: -20px;
}
.uploadFile {
  height: 0;
}
.ql-editor {
  width: 100%;
}
.ql-editor img {
  max-width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/* .avatar {
  width: 178px;
  height: 178px;
  display: block;
} */

.ql-container {
  overflow-y: auto;
  height: 20rem !important;
}

.ql-container ::-webkit-scrollbar {
  width: 10px; /*竖向滚动条的宽度*/
  height: 10px; /*横向滚动条的高度*/
}
.ql-container ::-webkit-scrollbar-thumb {
  /*滚动条里面的小方块*/
  background: #666666;
  border-radius: 5px;
}
.ql-container ::-webkit-scrollbar-track {
  /*滚动条轨道的样式*/
  background: #ccc;
  border-radius: 5px;
}
.editor {
  line-height: normal !important;
  height: 300px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.ql-snow.ql-toolbar .ql-upload {
  background: url("../../assets/image/upload.png");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  /* background: red; */
}
</style>

组件中引入的各个文件代码
1、import { addQuillTitle } from “@/utils/quill/quill-title.js”;
2、import { lineHeightStyle } from “@/utils/quill/lineHeight”;
3、 @import “…/…/assets/styles/font.css”;

1、quill-title.js


const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '字体颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-lineheight': '行高',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-upload': '附件',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
};

export function addQuillTitle () {
    const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select'),
        aSpan = oToolBar.querySelectorAll('span');
    aButton.forEach((item) => {
        if (item.className === 'ql-script') {
            item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
            item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else if (item.className === 'ql-list') {
            item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表'
        } else if (item.className === 'ql-header') {
            item.value === '1' ? item.title = '标题H1' : item.title = '标题H2';
        } else {
            item.title = titleConfig[item.classList[0]];
        }
    });
    aSelect.forEach((item) => {
        if (item.className != 'ql-color' && item.className != 'ql-background') {
            item.parentNode.title = titleConfig[item.classList[0]];
        }
    });
    aSpan.forEach((item) => {
        if (item.classList[0] === 'ql-color') {
            item.title = titleConfig[item.classList[0]];
        } else if (item.classList[0] === 'ql-background') {
            item.title = titleConfig[item.classList[0]];
        }
    });
}

2、lineHeight

import Quill from "quill";
let Parchment = Quill.import("parchment");
// console.log('Parchment', Parchment);
class lineHeightAttributor extends Parchment.Attributor.Style { }
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
    scope: Parchment.Scope.INLINE,
    whitelist: ["initial", "1", "1.5", "1.75", "2", "3", "4","5"]
});

export { lineHeightStyle };

3.font.css

.ql-editor{
  font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=MicrosoftYaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=MicrosoftYaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=TimesNewRoman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=TimesNewRoman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sansSerif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sansSerif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}
.ql-font-SimHei {
  font-family: "SimHei";
}
.ql-font-MicrosoftYaHei {
  font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-font-FangSong {
  font-family: "FangSong";
}
.ql-font-Arial {
  font-family: "Arial";
}
.ql-font-TimesNewRoman {
  font-family: "Times New Roman";
}
.ql-font-sansSerif {
  font-family: "sans-serif";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
  content: '30px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
  content: '36px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='42x']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='42px']::before {
  content: '42px';
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
  content: '1.5';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
  content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}

全局引用Editor组件

// Quill富文本引入
import VueQuillEditor from "vue-quill-editor";
Vue.use(VueQuillEditor);
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

// 封装的富文本组件
import quill from "@/components/Editor/index.vue";
Vue.component("quill", quill);

使用

在组件中使用

<template>
   <quill @input="input" :value="form.content"></quill>
</template>

<script>
export default {
  methods: {
   // 富文本
    input(content) {
      this.form.content = content;
    },
   }
 }
</script>
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
m0_61549674的博客
03-20 1739
placeholder: “请在这里输入”,modules:{toolbar:[[‘bold’, ‘italic’, ‘underline’, ‘strike’], //加粗，斜体，下划线，删除线[‘blockquote’, ‘code-block’], //引用，代码块[{ ‘header’: 1 }, { ‘header’: 2 }], // 标题，键值对的形式；1、2表示字体大小。
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue-quill-editor汉化
lao_wang_tou的博客
03-09 1984
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px" !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=...
探索Vue-Quill-Editor：为Vue.js打造的强大富文本编辑器
最新发布
gitblog_00061的博客
08-09 826
探索Vue-Quill-Editor：为Vue.js打造的强大富文本编辑器 vue-quill-editor@quilljs editor component for @vuejs(2)项目地址:https://gitcode.com/gh_mirrors/vu/vue-quill-editor 在现代Web开发中，富文本编辑器是不可或缺的工具之一。vue-quill-editor 是一个专为V...
vue-quill-editor
imkaifan的博客
03-30 494
vue项目中富文本编辑器的使用 1、引入 npm install vue-quill-editor --save 在那个组件中用就在那个组件中引入 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 { compone.
vue富文本编辑器组件vue-quill-edit使用教程
12-12
之前使用的富文本编辑器是uEditor,kindEditor，感觉不太方便。 近期项目vue单页面，就使用vue-quill-edit这个编辑器组件吧！ 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册： import ...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
而vue-quill-editor是Vue的一个插件，用于集成强大的Quill富文本编辑器。 首先，要使用vue-quill-editor，我们需要通过npm安装它： ```bash npm install vue-quill-editor --save ``` 接下来，在项目的`main.js`...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
11-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，它提供了丰富的编辑功能，例如加粗、斜体、下划线、列表等。然而，在实际使用过程中，可能会遇到一些样式方面的问题，比如小图标排列不整齐或样式错乱...
Vue-Quill-Editor
詹Sir的博客
02-28 764
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Example Component example page CDN example page Install NPM npm install vue-quill-editor --save # or yarn add vue-quill-editor CDN <link rel="stylesheet" href="path/to/quill.core.css"/> <link rel="s
vue 封装富文本组件wangeditor
weixin_42206447的博客
06-19 609
1：使用npm下载： //（注意 wangeditor 全部是小写字母） npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3：HTML <template> <div id="wangeditor"> <div ref="editorElem" style="text-align: left;"></div> </di...
Vue-Quill-Editor富文本编辑器
m0_74608954的博客
08-24 531
【代码】Vue-Quill-Editor富文本编辑器。
Vue富文本编辑器(vue-quill-editor)
来了波，兄嘚
12-20 2235
想看官方文档请点我---->官方文档 使用步骤 1.npm进行安装 npm install vue-quill-editor 安装依赖项： npm install quill 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import
Vue富文本编辑器vue-quill-editor
weixin_45303325的博客
12-10 607
vue-quill-editor的安装/引用 使用步骤: npm i quill vue-quill-editor import { quillEditor} from "vue-quill-editor"; import "quill/dist/quill.snow.css"; //quill编辑器的样式表 在vue中注册quillEditor组件 components: { quillEditor }, 在template中使用这个组件 <quill-editor v-mode
富文本编辑器 --vue-quill-editor
qq_49575831的博客
03-10 412
【代码】富文本编辑器 --vue-quill-editor。
Vue轻量级富文本编辑器-Vue-Quill-Editor
热门推荐
VITAMIN的博客
09-04 13万+
先看效果图：女神镇楼 下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill（Vue-Quill-Editor需要依赖） npm install quill --save 代码 <template>...
vue-quill-editor封装
07-28
Vue-quill-editor 是一个基于 Quill.js 的富文本编辑器组件，用于在 Vue.js 项目中实现富文本编辑功能。下面是一个简单的封装示例: 首先，安装 vue-quill-editor： ``` npm install vue-quill-editor ``` 然后，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值