vue-quill-editor 在vue中的使用及增加源代码编辑器

Vue中集成vue-quill-editor并实现代码编辑

最新推荐文章于 2025-09-10 01:26:47 发布

qq_40194097

最新推荐文章于 2025-09-10 01:26:47 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40194097/article/details/106782144

本文介绍了如何在Vue项目中安装和使用vue-quill-editor，包括编辑器的基本使用和如何添加源代码编辑功能。通过引入quill.eeSourceBtn.js文件，实现了代码编辑的增强。

安装vue-quill-editor

cnpm install vue-quill-editor -S

编辑组件中引入

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.组件使用



<quill-editor
     v-model="content"
     ref="myQuillEditor"
     :options="editorOption"
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
 </quill-editor>

const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{
   
    header: 1 }, {
   
    header: 2 }], // 1、2 级标题
    [{
   
    list: "ordered" }, {
   
    list: "bullet" }], // 有序、无序列表
    [{
   
    script: "sub" }, {
   
    script: "super" }], // 上标/下标
    [{
   
    indent: "-1" }, {
   
    indent: "+1" }], // 缩进
    // [{'direction': 'rtl'}],                         // 文本方向
    [{
   
    size: ["small", false, "large", "huge"] }], // 字体大小
    [{