富文本框的使用_npm的富文本框-CSDN博客

本文链接：https://blog.csdn.net/weixin_51666715/article/details/125174088

该博客介绍了如何在Vue中集成Quill富文本编辑器，包括引入模块、设置主题和工具栏选项，并实现自定义图片上传功能。同时，通过监听文本变化来动态获取编辑器中的内容，展示了如何在用户点击按钮时获取并打印当前编辑器的HTML内容。

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

富文本框

npm i quill --save

<template>
  <div class="">
    <!-- 富文本编辑器, 容器 -->
    <div id="J_quillEditor"></div>

    <button @click="btn">点击</button>
  </div>
</template>

<script>
import Quill from "quill";              //引入模块
import 'quill/dist/quill.snow.css'      //引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "Quill",
  data() {
    return {
      reason : '',
      quillEditor: null,
      quillEditorToolbarOptions: [
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block", "image"],
        [
          {
            header: 1,
          },
          {
            header: 2,
          },
        ],
        [
          {
            list: "ordered",
          },
          {
            list: "bullet",
          },
        ],
        [
          {
            script: "sub",
          },
          {
            script: "super",
          },
        ],
        [
          {
            indent: "-1",
          },
          {
            indent: "+1",
          },
        ],
        [
          {
            direction: "rtl",
          },
        ],
        [
          {
            size: ["small", false, "large", "huge"],
          },
        ],
        [
          {
            header: [1, 2, 3, 4, 5, 6, false],
          },
        ],
        [
          {
            color: [],
          },
          {
            background: [],
          },
        ],
        [
          {
            font: [],
          },
        ],
        [
          {
            align: [],
          },
        ],
        ["clean"],
      ],
    }
  },
  mounted(){
    this.quillEditorHandle();
  },
  methods: {
    // 富文本编辑器
    quillEditorHandle() {
      this.quillEditor = new Quill("#J_quillEditor", {
        modules: {
          toolbar: this.quillEditorToolbarOptions,
        },
        theme: "snow",
      });
      // 自定义上传图片功能 (使用element upload组件)
      this.quillEditor.getModule("toolbar").addHandler("image", () => {
         // 自定义上传图片事件
        console.log('点击上传图片触发')
      });
      
      // 监听内容变化，动态赋值
      this.quillEditor.on("text-change", () => {
        this.reason = this.quillEditor.root.innerHTML;
      });
    },

//获取的内容值
    btn(){
      console.log(this.reason);
    }
  }
}
</script>

<style>
.ql-snow .ql-tooltip[data-mode=link]::before {
   content: "请输入链接地址:" !important;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
     border-right: 0px !important;
     content: '保存' !important;
     padding-right: 0px !important;
 }
 
 .ql-snow .ql-tooltip[data-mode=video]::before {
     content: "请输入视频地址:" !important;
 }
 
 .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=small]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
   content: '10px' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: '文本' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 .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' !important;
 }
 
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: '标准字体' !important;
 }
 .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: '衬线字体' !important;
 }
 .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: '等宽字体' !important;
 }
</style>