Обработка таблицы необработанного HTML в Quill - PullRequest
Новая
       6

Обработка таблицы необработанного HTML в Quill

0 голосов
/ 20 декабря 2018

Я весь день бился об это, и я никуда не попал.У меня есть следующий необработанный HTML-код, который я пытаюсь ввести в Quill: 

<div id="content">
    <table>
        <tbody>
            <tr>
                <th data-rte-fence=""><b>Table header</b></th>
            </tr>
            <tr>
                <td data-rte-fence="">row 1</td>
            </tr>
            <tr>
                <td data-rte-fence="">row 2</td>
            </tr>
        </tbody>
    </table>
</div>

Я расширил следующие блоты: 

import Quill from 'quill';

const { Block, Container } = Quill.import('parchment');

class TableCell extends Block {
    static tagName = 'TD';
    static blotName = 'table-cell';
}

class TableHead extends Block {
    static tagName = 'TH';
    static blotName = 'table-head';
}

class TableRow extends Block {
    static tagName = 'TR';
    static blotName = 'table-row';
    static allowedChildren = [TableHead, TableCell];
}

class TableBody extends Block {
    static tagName = 'TBODY';
    static blotName = 'table-body';
    static allowedChildren = [TableRow];
}

class Table extends Block {
    static tagName = 'TABLE';
    static blotName = 'table';
    static allowedChildren = [TableBody];
}

И я зарегистрировал их так: 

Quill.register(Table);
Quill.register(TableBody);
Quill.register(TableRow);
Quill.register(TableCell);
Quill.register(TableHead);

Я создаю экземпляр Quill следующим образом: 

const editor = new Quill(document.getElementById('content'), {});

И постоянно получаю следующую ошибку:

Uncaught Error: Невозможно вставить блок в прокрутку

И вот что я попробовал: Прочитав документы пергамент , я понял, что блочные блоты похожи на блочные элементы, такие как <p></p> или <div></div>, поэтому я решил, что они могут бытьхорошо подходит для <table>, <tbody> и т. д. Поэтому я подумал, что будет достаточно просто создать блоты и заполнить их правильными именами тегов, а Quill просто отобразит их.

Демонстрация здесь:https://codesandbox.io/s/rmlrl2oqqn

Все, что я хочу, это чтобы Quill отображал таблицу, я не хочу никаких взаимодействий с ней (например, манипулирование строками / столбцами).

Любые указания приветствуются!

...