vue 使用vue-quill-editor 富文本添加源码模式,查看源码功能和表格功能

news2024/11/24 17:40:17

今天接到个需求,在富文本中增加查看源码和增加表格功能,感觉这种功能手拿把掐,但是奈于平时沉迷于移动端有段时间没写pc了,看了下官方感觉一个头两个大,于是在茫茫文档中各种借鉴(抄袭)完成了功能

1.源码功能相对来说比较简单 就是自定义工具栏

options: {
 theme: 'snow',
 modules: {
  toolbar: {
     container: [
	  ['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' }], // 文本方向
	  ['link', 'image', 'video'], // 链接、图片、视频
	  [{ align: [] }], // 添加居中按钮
	  [{ color: [] }], // 文字颜色按钮
	  ['sourceEditor'],//新添加源码的工具
	 ]
   }
 }
}

在handlers中添加事件

handlers: {
     sourceEditor: function () {     //添加工具方法
       const reg = /\<br\>/g,
         container = this.container,
         firstChild = container.nextElementSibling.firstChild;
       if (!this.shadeBox) {
         let shadeBox = this.shadeBox = document.createElement('div');
         shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); cursor:pointer';
         container.style.position = 'relative';
         shadeBox.addEventListener('click', function () {
           this.style.display = 'none';
           firstChild.innerHTML = firstChild.innerText.trim();
         }, false);
         container.appendChild(shadeBox);
         let innerHTML = firstChild.innerHTML;
         innerHTML = innerHTML.replace(reg, '');
         firstChild.innerText = innerHTML;
       } else {
         let innerHTML = firstChild.innerHTML;
         innerHTML = innerHTML.replace(reg, '');
         firstChild.innerText = innerHTML;
         this.shadeBox.style.display = 'block';
       }
     }
   },
            

在mounted中增加显示图标

mounted() {
this.$el.querySelector(
  '.ql-sourceEditor'
 ).innerHTML = `<i class="el-icon-edit"></i>`
}

效果图
在这里插入图片描述

增加表格功能

1.将quill的版本升级到2.0 切记 切记 切记

npm install quill@2.0.0-dev.4

2.将富文本封装成一个子组件 (和查看源码的代码一起,太懒了懒得拆分讲解)

<template>
 
  <div>
    <div class="editor"></div>
  </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'
const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '颜色',
  'ql-size': '字体大小',
  '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-video': '视频',
  'ql-clean': '清除字体样式',
  'ql-upload': '文件',
  'ql-table': '插入表格',
  'ql-table-insert-row': '插入行',
  'ql-table-insert-column': '插入列',
  'ql-table-delete-row': '删除行',
  'ql-table-delete-column': '删除列',
  'ql-sourceEditor': '源码编辑'
}
export default {
  name: 'editorQuill',
  props: {
    value: {
 
    }
  },
  data() {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
 
              ["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"] }], // 字体大小
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              // ["link","image"], // 链接、图片、视频
              ['sourceEditor'],//新添加的工具
              [
                { table: 'TD' },
                { 'table-insert-row': 'TIR' },
                { 'table-insert-column': 'TIC' },
                { 'table-delete-row': 'TDR' },
                { 'table-delete-column': 'TDC' }
              ]
            ],
            handlers: {
              table: function (val) {
                this.quill.getModule('table').insertTable(3, 3)
              },
              'table-insert-row': function () {
                this.quill.getModule('table').insertRowBelow()
              },
              'table-insert-column': function () {
                this.quill.getModule('table').insertColumnRight()
              },
              'table-delete-row': function () {
                this.quill.getModule('table').deleteRow()
              },
              'table-delete-column': function () {
                this.quill.getModule('table').deleteColumn()
              },
              sourceEditor: function () {     //添加工具方法
                const reg = /\<br\>/g,
                  container = this.container,
                  firstChild = container.nextElementSibling.firstChild;
                if (!this.shadeBox) {
                  let shadeBox = this.shadeBox = document.createElement('div');
                  shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); cursor:pointer';
                  container.style.position = 'relative';
                  shadeBox.addEventListener('click', function () {
                    this.style.display = 'none';
                    firstChild.innerHTML = firstChild.innerText.trim();
                  }, false);
                  container.appendChild(shadeBox);
                  let innerHTML = firstChild.innerHTML;
                  innerHTML = innerHTML.replace(reg, '');
                  firstChild.innerText = innerHTML;
                } else {
                  let innerHTML = firstChild.innerHTML;
                  innerHTML = innerHTML.replace(reg, '');
                  firstChild.innerText = innerHTML;
                  this.shadeBox.style.display = 'block';
                }
              }
            },
            
          },
          table: true
        },
       // readOnly: true, //是否只读
        placeholder: ''
      }
    }
  },
  methods: {
    addQuillTitle() {
      const oToolBar = document.querySelector('.ql-toolbar')
      const aButton = oToolBar.querySelectorAll('button')
      const aSelect = oToolBar.querySelectorAll('select')
      aButton.forEach(function (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 {
          item.title = titleConfig[item.classList[0]]
        }
      })
      aSelect.forEach(function (item) {
        item.parentNode.title = titleConfig[item.classList[0]]
      })
    },
    getContentData() {
      return this.quill.getContents()
    }
  },
  mounted() {
    const dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options)
    this.quill.clipboard.dangerouslyPasteHTML(0, this.value)  // html格式数据
    this.quill.on('text-change', () => {
      // console.log(this.quill.getContents())//detla格式数据
      // this.$emit('contentData', this.quill.getContents()) 
      // console.log(this.quill.root.innerHTML)//html格式数据
      this.$emit('contentData', this.quill.root.innerHTML)
    })
    this.$el.querySelector(
      '.ql-table-insert-row'
    ).innerHTML = `<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`
    this.$el.querySelector(
      '.ql-table-insert-column'
    ).innerHTML = `<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`
    this.$el.querySelector(
      '.ql-table-delete-row'
    ).innerHTML = `<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`
    this.$el.querySelector(
      '.ql-table-delete-column'
    ).innerHTML = `<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`
    this.$el.querySelector(
      '.ql-sourceEditor'
    ).innerHTML = `<i class="el-icon-edit"></i>`
    this.addQuillTitle()
  },
  activated() {
    this.quill.setContents({})
  }
}
</script>

3.在父组件中用

<template>
  <div>
	  <editor-quill
	   ref="myQuillEditor"
	   v-model="content"
	   class="my-quill-editor"
	   />
 </div>
</template>
<script>
import editorQuill from '../editorQuill'
export default {
  components: {
    editorQuill,
  },
  data() {
    return {
       content:''
    }
  }
}
</script>

4.总体效果图
在这里插入图片描述
本人菜鸡各位大哥请轻点喷,有啥问题可以私

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2123909.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

练习:基于TCP协议实现一个网盘系统

一. 题目介绍 请基于TCP协议实现一个网盘系统&#xff0c;包含客户端、服务端&#xff0c;各自需求如下&#xff1a; - 客户端 - 用户注册&#xff0c;注册成功之后&#xff0c;在服务端的指定目录下为此用户创建一个文件夹&#xff0c;该文件夹下以后存储当前用户的数据&…

【python因果推断库15】使用 sci-kit learn 模型进行回归断点分析

目录 导入数据 线性模型和主效应模型 线性模型、主效应模型和交互作用模型 使用bandwidth from sklearn.gaussian_process import GaussianProcessRegressor from sklearn.gaussian_process.kernels import ExpSineSquared, WhiteKernel from sklearn.linear_model import …

存储课程学习笔记5_iouring的练习(io_uring,rust_echo_bench,fio)

我们知道&#xff0c;在处理大量高并发网络时&#xff0c;一般考虑并发&#xff0c;以及设计对应的方案&#xff08;比如select,poll,epoll&#xff09;等。 那么如果频繁进行文件或者磁盘的操作&#xff0c;如何考虑性能和并发&#xff0c;这里就可以考虑用到io_uring。 0&a…

C语言深入理解指针二(15)

文章目录 前言一、指针变量类型的意义指针的解引用指针-整数void*指针 二、const修饰指针const修饰变量 三、指针运算指针-整数指针-指针指针比较大小 四、野指针野指针成因如何规避野指针 总结 前言 本节课开始上点有意思的内容了&#xff01; 一、指针变量类型的意义 指针的…

Spark 集群进行 ETL 的架构介绍

一 什么是ETL ETL&#xff08;extract提取、transform转换、load加载&#xff09;。ETL负责将分散的、异构数据源中的数据如关系数据、平面数据文件等抽取到临时中间层后&#xff0c;进行清洗、转换、集成&#xff0c;最后加载到数据仓库或数据集市中&#xff0c;成为联机分析…

论文速读|通过 SERL 算法优化轻量级双足机器人结构

论文地址&#xff1a;https://arxiv.org/pdf/2408.15632 这篇论文展示了SERL算法在双足机器人结构参数设计中的有效性&#xff0c;提供了推进该领域的重要见解。通过结合强化学习运动控制策略和进化算法&#xff0c;SERL算法成功识别出在指定设计空间内最能满足任务要求的结构…

GO语言性能分析

Go语言基准测试与pprof工具性能分析详解 在现代软件开发中&#xff0c;性能优化是一个重要的环节。Go语言提供了强大的工具来进行基准测试和性能分析&#xff0c;其中 testing 包用于基准测试&#xff0c;而 pprof 工具用于性能分析。本文将详细讲解如何使用这些工具来进行性能…

如何快速构建RTMP直播推送业务场景?

大牛直播SDK跨平台RTMP直播推送模块&#xff0c;始于2015年&#xff0c;支持Windows、Linux&#xff08;x64_64架构|aarch64&#xff09;、Android、iOS平台&#xff0c;支持采集推送摄像头、屏幕、麦克风、扬声器、编码前、编码后数据对接&#xff0c;功能强大&#xff0c;性能…

美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)

美术管理信息系统 目录 基于javavue的美术资源管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能模块 管理员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农…

基于JAVA+SpringBoot+Vue的前后端分离的图书馆管理系统

基于JAVASpringBootVue的前后端分离的图书馆管理系统 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#…

【408 数据结构】第2章 线性表

文章目录 线性表考纲线性表的定义和基本操作1. 定义2. 线性表的基本操作 线性表的顺序表示1. 顺序表的定义2. 顺序表基本操作的实现初始化插入-时间复杂度O(n)删除-时间复杂度O(n)按值查找-时间复杂度O(n) 线性表的链式表示1. 单链表的定义2. 单链表基本操作的实现单链表的初始…

计算机毕业设计选题推荐-自驾游攻略管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

usb-ss 与 pcie 协议欣赏 --- linux kernel 欣赏

我们先来看usb ss phy , 然后看pcie phy. 我们先来看一下 usb ss phy 的第一条初始化通路. 这是基础设施的构建&#xff0c;这对应着系统启动时usb ss phy一系列稳定性问题 . 一看到probe函数&#xff0c;好啊&#xff0c;它是一切的根. 所谓的无源之水无本之木&#xff0c;这…

C++设计模式——Memento备忘录模式

一&#xff0c;备忘录模式的定义 备忘录模式是一种行为型设计模式&#xff0c;它允许将对象的状态保存在外部&#xff0c;并在需要时恢复。 备忘录模式允许在不破坏封装性的前提下&#xff0c;捕获并存储一个对象的内部状态&#xff0c;并在需要时将其恢复到之前的状态。 在…

IT前端好用的工具集

在线抠图网站 https://www.remove.bg/ 将iconfont转成css显示 https://transfonter.org/ 免费的在线图片压缩 https://tinypng.com/ JSON在线格式化工具 https://www.sojson.com/ 国内人工智能kimi.moonshot工具 https://kimi.moonshot.cn/chat/crft7a6sdv14grouufs0 自动…

2024年录屏神器大盘点,轻松捕捉屏幕精彩

现在讲解一些操作越来越便捷了&#xff0c;我 一般都是用录屏工具来边录制操作边讲解&#xff0c;这样可以更方便对方了解操作步骤。这次我就分享几款免费录屏工具一起来试试吧。 1.福晰录屏软件 链接&#xff1a;www.foxitsoftware.cn/REC/ 对于初次尝试录屏的新手来说&…

java语言发展史

Java语言的发展史是一部丰富多彩的科技演进史&#xff0c;它从一个简单的项目逐渐成长为全球范围内广泛使用的高级编程语言。下面&#xff0c;我将带您简要回顾Java的发展历程。 起源&#xff1a;Oak阶段&#xff08;1991-1995&#xff09; Java的前身是Oak&#xff0c;由詹姆斯…

【软考】设计模式之责任链模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. 适用性6. 优点7. 缺点8. java示例 1. 说明 1.使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。2.将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为…

【漏洞复现】易天智能eHR CreateUser 任意用户添加漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

81页PPT产业园5G多功能智慧灯杆整体规划设计方案

学习9000多份智慧城市&#xff0c;智慧医院&#xff0c;智能制造&#xff0c;数字化转型&#xff0c;新质生产力&#xff0c;算力&#xff0c;大模型&#xff0c;AIGC&#xff0c;工业互联网&#xff0c;数字孪生......持续更新热点行业解决方案&#xff0c;公号智慧方案文库。…