首页 > 其他分享 >quill-better-table

quill-better-table

时间:2023-11-17 17:25:02浏览次数:43  
标签:text better item table ql quill

项目需要在原有的quill富文本编辑器中加上表格的功能(参考的第一个文章实现的表格不需要quill-better-table,但没有合并等功能)

安装依赖:(quill-better-table 基于quilljs 2.0版本实现,quilljs 2.0版目前并未发布稳定版)

npm install [email protected] 
npm install quill-better-table 

editor.vue

<template>
  <keep-alive>
    <div>
      <div class="editor"></div>
    </div>
  </keep-alive>
</template>

<script>
import Quill from 'quill'
import QuillBetterTable from 'quill-better-table'
import 'quill-better-table/dist/quill-better-table.css'
Quill.register(
  {
    'modules/better-table': QuillBetterTable
  },
  true
)
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': '删除列'
}
export default {
  name: 'Editor',
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      contentValue: this.value,
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 标题 —— 独立平铺
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ script: 'sub' }, { script: 'super' }], // 下标/上标
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 —— 下拉选择
              [{ color: [] }, { background: [] }],
              [{ font: [] }], // 字体
              [{ align: [] }],
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'],
              [{ table: 'TD' }]
            ],
            handlers: {
              table: function(val) {
                this.quill.getModule('better-table').insertTable(3, 4)
              }
            }
          },
          table: false,
          'better-table': {
            operationMenu: {
              items: {
                insertColumnRight: { text: '右边插入一列' },
                insertColumnLeft: { text: '左边插入一列' },
                insertRowUp: { text: '上边插入一行' },
                insertRowDown: { text: '下边插入一行' },
                mergeCells: { text: '合并单元格' },
                unmergeCells: { text: '拆分单元格' },
                deleteColumn: { text: '删除列' },
                deleteRow: { text: '删除行' },
                deleteTable: { text: '删除表格' }
              },
              color: {
                colors: ['green', 'red', 'yellow', 'blue', 'white'],
                text: '背景色:'
              }
            }
          },
          keyboard: {
            bindings: QuillBetterTable.keyboardBindings
          }
        },
        placeholder: ''
      },
      currentPoint: ''
    }
  },
  watch: {
    value(val) {
      this.contentValue = val
      this.quill.root.innerHTML = val
    }
  },
  mounted() {
    const dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options)
    this.quill.root.innerHTML = this.contentValue
    this.quill.on('text-change', () => {
      this.$emit('contentData', this.quill.root.innerHTML)
    })
    this.addQuillTitle()
  },
  activated() {
    // this.quill.setContents({})
  },
  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()
    }
  }
}
</script>

引用文件(我是用在编辑界面,最后会出现一个问题,右键的时候看不到应该出现的按钮,原来是被el-dialog的遮住了,然后提高了按钮样式的层级)

       
......
        <el-form-item label="内容"> <editor style="width: 90%;" v-model="info" @contentData="changeContent($event)" ></editor> </el-form-item>
        ......

import editor from '@/pages/decision/components/editor.vue'   changeContent(data) {   this.info = data },
 

css:

.ql-editor {
  min-height: 400px;
  height: auto !important;
  height: 400px;
}
.qlbt-operation-menu {
  z-index: 9999 !important;
}

 

展示页面:

                    <div ref="fileCont" class="ql-container">
                        <div
                          class="ql-editor"
                          v-html="cont"
                          style="margin-left:100px;margin-right:100px;"
                        ></div>
                      </div>        

 最后的效果:

 查看效果:

 

 

 

参考文章:

https://blog.csdn.net/dangsh_/article/details/115115349

https://codepen.io/soccerloway/pen/WWJowj(quill-better-table在线demo)

https://blog.csdn.net/qq_30306717/article/details/127909758

标签:text,better,item,table,ql,quill
From: https://www.cnblogs.com/utomboy/p/17839224.html

相关文章

  • 【11月LeetCode组队打卡】Task1--HashTable
    在准备CSP,借这次组队打卡的机会好好复习一下cpp的各种基操(微操,和基础的数据结构217.存在重复元素vector向量的用法有点忘了,先简单回顾一下(其实是好久没写cpp了(安详.jpg输入与输出//未知数组元素个数vector<int>hash;intx;while(cin>>x){hash......
  • 为React Ant-Design Table增加字段设置
    最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将这些差别都集成了进去,......
  • vue获取el-table当中选中行的各列数据
      首先在标签中声明@selection-change="handleSelectionChange"之后在script中的methods当中编写该方法console.log(this.$refs.cgTable.selection);这一行代码可以获取你所选择的所有行this.idList=this.$refs.cgTable.selection.map((item)=>item.id);运用map获......
  • 软件分类——博客园标签分类以及“博客网页编辑博客,如何插入Excel中的表格,并且可在网
    .NET技术:后端开发:软件设计:前端开发:企业信息化:移动端开发:软件工程:数据库:操作系统:其他分类:.NET新手区Java架构设计Html/CssBPMAndroid开发敏捷开发SQLServerWindows非技术区ASP.NETPython面向对象JavaScriptSharePointiOS开发项目与团队管理Orac......
  • Can Report (rdlc) Table or Matrix Column Width Be Set at Runtime?
     UsinganrdlcreportinReportViewer,Ineedtocreateatableormatrixwherethenumberofcolumnsandthekindsofdatadisplayedinthecolumnschangeswitheachreport. Forexample,inonereport,thesecondcolumnmayholdpriceinformation. Ina......
  • element plus -- el-table 中分页选中回显
    需求:切换分页或者根据筛选条件过滤后选中项依然保持选中状态代码:<el-rowclass="pro-list-container"><el-table:data="productAttrs"ref="multipleTable"class="pro-table":header-cell-style="{backgrou......
  • sortablejs拖拽功能
    官网:http://www.sortablejs.com/中文文档:https://www.itxst.com/sortablejs/neuinffi.htmlgithub地址如下:https://github.com/SortableJS/react-sortablejsimportReact,{FC,useState}from'react';import{ReactSortable}from'react-sortablejs';......
  • Vue轻量级富文本编辑器-Vue-Quill-Editor
    先看效果图:女神镇楼1.下载Vue-Quill-Editornpminstallvue-quill-editor--save2.下载quill(Vue-Quill-Editor需要依赖)npminstallquill--save3.代码<template><divclass="edit_container"><quill-editorv-model="cont......
  • springboot~ConfigurableListableBeanFactory和ApplicationContext的使用场景
    在工具类中封装getBean,使用哪个接口来实现实事上,在工具类中,实现BeanFactoryPostProcessor和ApplicationContextAware接口后,使用它们构造方法里的对象ConfigurableListableBeanFactory和ApplicationContext都可以很方便的获取spring容器里的bean,而在实际应用时,还有有些不同的,比如在......
  • ERROR: Failed to Setup IP tables: Unable to enable SKIP DNAT rule
    1、错误场景和现象Linux开启或重启防火墙后,使用默认驱动程序创建网络“docker-compose_default”报错如下:Creatingnetwork"docker-compose_default"withthedefaultdriverERROR:FailedtoSetupIPtables:UnabletoenableSKIPDNATrule:(iptablesfailed:iptab......