quill1.3.7-table-module

QuillJS table

A table module used in QuillJS@1.3.7

Demo

Install

npm install quill1.3.7-table-module

Usage

import Quill from 'quill';
import TableHandler, { rewirteFormats } from 'quill1.3.7-table-module';
import 'quill1.3.7-table-module/dist/index.css';

Quill.register({ [`modules/${TableHandler.moduleName}`]: TableHandler }, true);
rewirteFormats();

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [TableHandler.toolName],
    [`${TableHandler.moduleName}`]: {
      fullWidth: true,
      customButton: 'Custom Table',
    },
  },
});

rewirteFormats

To handle exceptions, it is necessary to rewrite some native formats. you can skip this function. but the relevant format may be displayed incorrectly in the table

rewrite formats

format	description
ListItem	Rewrite method replaceWith. Make ul/ol to display correctly within cells

Options

attribute	description	type	default
fullWidth	Always 100% width	boolean	false
customSelect	Custom picker element. The returned element needs to trigger an event to create a table	() => HTMLElement
tableToolTip	Table tool tip configuration	ToolTip
operationMenu	OTable contextmenu configuration	perationMenu
selection	Table cell selection configuration	TableCellSelection
dragResize	Enable table cell width dragger	boolean	true
customButton	Define a label for the custom table button	string	'自定义行列数'

fullWidth

If the value is true. the width of the table is always 100%

customSelect

The element returned by the customSelect method will be inserted into the toolbar, and the element needs to trigger a custom event TableModule.createEventName and carry data { row: number, col: number } in the detail

ToolTip

attribute	description	type	default
tipHeight	Slider height	number	12px
disableToolNames	Disabled tools name within the table	string[]

OperationMenu

attribute	description	type	default
items	Contextmenu item	Record<string, OpertationMenuItem>	{ insertColumnLeft, insertColumnRight, insertRowTop, insertRowBottom, removeRow, removeCol, removeTable, mergeCell, setBorderColor, setBackgroundColor, clearBackgroundColor, clearBorderColor }
replaceItems	Replace contextmenu item	Boolean	false
modifyItems	Modify contextmenu items	Boolean	false

OpertationMenuItem

attribute	type	description
text	string / () => HTMLElement | HTMLElement[]	Item text or the nodes to append to the item.
iconSrc	HTMLString	Pre icon
handler	() => void / (color) => void	Click event or color input event. handler
subTitle	string	Subtitle
groupEnd	boolean	Group underline. Do not display underline for the last item
isColorChoose	boolean	Set this true will make this item as color choose item. handler will be called when color trigger input event

TableCellSelection

attribute	description	type	default
primaryColor	Border color	string	#0589f3