table功能是如何支持的....

plh97 commented 5 years ago

公司在开发一款编辑器,一定要用draft.js.,,,,,看到你这边已经支持了表格功能了...不过好像看不到例子

plh97 commented 5 years ago

表格这个交互性咋样呢??

margox commented 5 years ago

现在能实现简单的合并/拆分单元格的操作，你可以把braft-extensions这个项目clone下来在本地跑一下看看效果

margox commented 5 years ago

因为draftjs不支持嵌套block，所以要实现表格，最开始我也以为是毫无办法的。现在这个办法也是偶然之间试验出来的。在blockRenderMap可以设置某种特定类型的block的渲染标签，以及连续的该类型block可以用一个wrapper包裹起来：

Immutable.Map({
    'table-cell': {
      element: 'td',
      wrapper: <Table editor={props.editor} editorState={props.editorState}/>
    },
  })

这样，连续的table-cell就会被渲染在Table组件中，只要在Table组件中对props.children进行有效的组织就行了

margox commented 5 years ago

Table组件的全部实现： https://github.com/margox/braft-extensions/blob/master/src/table/render.jsx

margox commented 5 years ago

对单元格的操作，其实是就是对editorState中的blockMap的操作，为此专门实现了一系列操作方法： https://github.com/margox/braft-extensions/blob/master/src/table/utils.js

margox commented 5 years ago

欢迎加QQ群一起讨论 725634541

plh97 commented 5 years ago

很棒,我也做到这一步了..

class MyCustomTable extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div  className="true"  data-block="true"   >
        <table className="MyCustomBlock">
          <tbody>
            <tr>
              <td>213</td>
              <td>12312</td>
            </tr>
            <tr>
              <td>213</td>
              <td>12312</td>
            </tr>
          </tbody>
          </table>
      </div>
    )
  }
}

const blockRenderMap = Immutable.Map({
  'MyCustomTable': {
    element: 'section',
    wrapper: <MyCustomTable />,
  },
  'table': {
    element: 'table'
  },
  'unstyled': {
    element: 'div'
  }
});

        <Editor
          blockRenderMap={blockRenderMap}             // 定制块状样式
          customStyleMap={styleMap}                   // 定制内联样式
          editorState={this.state.editorState}
          // handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
        />

YufeeXing commented 5 years ago

可不可以单击表格ICON，弹出浮层，支持输入自定义的行数和列数

margox commented 5 years ago

@YufeeXing 可以做，而且实现也不麻烦，但是最近时间比较紧张，我晚上看看能不能加上去

YufeeXing commented 5 years ago

回复的真快给力

zhoumh1988 commented 5 years ago

@YufeeXing 可以做，而且实现也不麻烦，但是最近时间比较紧张，我晚上看看能不能加上去

这个功能加上了吗？我没找到实现的demo

我找到了，因为我的控制栏是自定义的，所以要加上table。

betty0417 commented 4 years ago

如果想给table加一些其他配置，例如border，该如何设置呢？使用时，options的内容可以填写哪些呢？

margox / braft-extensions

table功能是如何支持的.... #6