Question

这整天我一直在head头，我无处可去。我有以下原始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'), {});

我一直收到以下错误：

未捕获的错误：无法将块插入滚动

这是我尝试的方法：阅读parchment文档后，我了解到“块印迹”类似于类似“ <p></p>”或“ <div></div>”的块状元素，因此我认为它们可能是非常适合<table>，<tbody>等。因此，我认为仅创建污点并使用正确的标签名称填充污点就足够了，而Quill只会渲染它们。

此处演示：https://codesandbox.io/s/rmlrl2oqqn

我只想让Quill渲染表格，我不希望与表格进行任何交互（例如行/列操作）。

任何指导都将受到欢迎！

在鹅毛笔中处理表格原始HTML

0 个答案: