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

最新推荐文章于 2024-07-12 15:45:55 发布

qq_40194097

最新推荐文章于 2024-07-12 15:45:55 发布

阅读量3.9k

点赞数 1

分类专栏： vue

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

版权

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

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

安装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"] }],