convertToHTML: missing HTML definition for block with type table-cell

billwing commented 5 years ago

使用表格扩展ContentUtils[type](editorState, html, null);，报错如下：

margox commented 5 years ago

你这个type是哪个？还有还是怎么使用的扩展？贴下代码

billwing commented 5 years ago

BraftEditor.use(
  Table({
    defaultColumns: 5,
    defaultRows: 3,
  })
);
BraftEditor.use(JZComponent({}));

const htmlString = '<table>...</table>';
ContentUtils.insertHTML(editorState, htmlString, null);

这个问题昨天还不会的，今天更新了依赖才出现。。

margox commented 5 years ago

你把JZComponent那个放到前面去试试

billwing commented 5 years ago

还是一样的问题

margox commented 5 years ago

除了更新依赖之外，出现问题的前后还有哪些其他的变更？更新的依赖是哪个？

billwing commented 5 years ago

更新依赖是直接yarn的，相关代码没有其它改动

billwing commented 5 years ago

package.json 我也手动改了这两个版本（当然，截图这里的还原不用在意。。）：

margox commented 5 years ago

那表格在编辑器中能正常显示么？是不是只有在调用editorState.toHTML的时候才报错？

margox commented 5 years ago

看一下你BraftEditor那部分的代码，还有初始化editorState哪里的代码

billwing commented 5 years ago

能正常显示，toHTML没问题，是自定义插入的时候有问题： ContentUtils.insertHTML(editorState, htmlString, null);

billwing commented 5 years ago

对了，使用工具栏的插入表格是没问题的

margox commented 5 years ago

你看下node_modules/braft-utils/下面是不是又有个node_modules/draft-js之类的？

billwing commented 5 years ago

表格htmlString的具体例子:

content: "<table>↵            <thead><th>主题</th><th>今日涨跌幅</th><th>主力净买额</th><th>领涨股</th></thead>↵            <tbody><tr><td>通信行业</td><td>0.04</td><td>27.26亿</td><td>吴通控股</td></tr><tr><td>软件信息</td><td>0.70</td><td>15.52亿</td><td>吴通控股</td></tr><tr><td>证券行业</td><td>0.29</td><td>10.48亿</td><td>哈投股份</td></tr><tr><td>计算机设备</td><td>0.13</td><td>7.99亿</td><td>聚龙股份</td></tr><tr><td>物流行业</td><td>-0.73</td><td>6.97亿</td><td>保税科技</td></tr></tbody>↵        </table>"

billwing commented 5 years ago

没有的，如下图：

margox commented 5 years ago

试试把node_modules删掉再重新yarn i一下

billwing commented 5 years ago

抱歉，应该是代码改动问题，因为我把全部代码还原到昨天的版本就可以了。打扰了，感谢~

billwing commented 5 years ago

刚才试过重新yarn了

billwing commented 5 years ago

总结一下：这个问题应该是由于在render使用editorState.toHTML()导致的，具体原因还不清楚；解决方案：在需要的时候才去使用editorState.toHTML()，可以通过state传递editorHtml到render；

floofydoug commented 5 years ago

@Billwing, can you paste how you used editorState.toHTML()? Google translate is not good enough for me to understand your solution.

billwing commented 5 years ago

@billwing, can you paste how you used editorState.toHTML()? Google translate is not good enough for me to understand your solution.

OK. Don't use editorState.toHTML() in render directly. Probably as follows:

class Writing extends PureComponent {
  state = {
    previewModalVisible: false,
    contentEditorHtml: '',
  };

  handlePreviewModalVisible = flag => {
    const { contentEditorState } = this.state;
    const html = flag ? contentEditorState.toHTML() : '';

    this.setState({
      contentEditorHtml: html,
      previewModalVisible: !!flag,
    });
  };

  render() {
    const { previewModalVisible, contentEditorHtml } = this.state;

    return (
      <Modal visible={previewModalVisible}>
        <div dangerouslySetInnerHTML={{ __html: contentEditorHtml }} />
      </Modal>
    );
  }
}

margox / braft-utils

convertToHTML: missing HTML definition for block with type table-cell #7