San4es commented 3 years ago

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

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Hello,

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

Prasad814359 commented 2 years ago