HtmlEditor - Table Support

[San4es]

The Problem

Tables are a common element of modern web documents. Our HTML/Markdown Editor does not support tables.

The Proposed Solution

Prior to DevExtreme v20.2, our HtmlEditor was based on the Quill engine v1.x. It does not support tables out-of-the-box. Quill v2.x supports basic table operations, but it has not yet been released. Quill v2 has been in the development stage for the last 2 years. We decided to fork it to have full control over further development and provide an API and UI to support tables. You can find our fork here: https://github.com/DevExpress/devextreme-quill.

The HtmlEditor can now render basic table layouts. You can format tables and their elements, and use the new API listed below to modify them.

Proposed API:

Get the Table Module Instance

const tables = editorInstance.getModule('tables');

The methods mentioned below are applied to the table/row/cell according to the text cursor position.

Manage Tables

tables.getTable(): [table, row, cell, offset]
tables.insertTable(rows: number, columns: number)
tables.deleteTable()

Manage Rows

tables.insertRow(offset: number) // offset > 0 : insertRowBelow ? insertRowAbove
tables.insertRowAbove()
tables.insertRowBelow()
tables.deleteRow()

Manage Columns

tables.insertColumn(offset: number) // offset > 0 : insertColumnRight ? insertColumnLeft
tables.insertColumnLeft()
tables.insertColumnRight()
tables.deleteColumn()

Toolbar Integration

The following toolbar items were added:

• insertTable
• insertRowAbove
• insertRowBelow
• insertColumnLeft
• insertColumnRight
• deleteColumn
• deleteRow
• deleteTable

You can specify them declaratively...

<dx-html-editor>
    <dxo-toolbar>
        <dxi-item formatName="addTable"></dxi-item>
        <dxi-item formatName="deleteTable"></dxi-item>
    </dxo-toolbar>
</dx-html-editor>

... or as a configuration object:

new HtmlEditor(element, {
    toolbar: {
        items: ['addTable', 'deleteTable']
    }
});

UI Design

Breaking Changes

Refer to the following breaking change ticket to see how to use new versions of the Quill scripts: HtmlEditor - the "quill" dependency replaced by "devextreme-quill".

Try It

Online Demos

jQuery

Angular

Vue

React

Installation

Follow the installation guide on the release page and leave feedback on this topic.

We Need Your Feedback

Take a Quick Poll

Does the table support feature meet your needs?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

[CollinHerber]

I would like to see Quill replaced entirely honestly.
Quill is pretty much an abandoned project and their constant delays and false promises has become rather tiring.

I would love to see a in-shop option built for an Html/WYSIWYG Editor. There are a few dozen open source projects out there that would get you to very close, if not all the way, to the finish line in what Quill already supports.

[dathoang]

@CollinHerber
I agree with you about the state of quill project, but Quill has a very importan feature: Delta.
It help you build realtime collaborative editor very easily. And I have not seen any FOS html editor that support realtime collaboration to date.

And about the new Devextreme Html Editor table: Big thank to the dev team. Hope you can add resize row and column feature soon

[San4es]

Hi,

The official v20.2 release is now available for download. You can see this feature in action in our online demos. We would appreciate it if you take a quick poll and leave your feedback in comments.

[jsdmitry]

Hello,

We have posted Table management enhancements. Let's continue our discussion there.

[Prasad814359]

Hello,
1. When I give the html content as a input to the editor the table is not rendering in the editor properly, similarly after editing the lines between the table cells are getting disappeared. can someone help regarding this issue.
2. Cannot able to provide background color for table cells.