Hufe921 / canvas-editor

rich text editor by canvas/svg
https://hufe.club/canvas-editor-docs
MIT License
3.47k stars 506 forks source link

如何实现表格中单元格的自定义宽高 #737

Closed BanneCharlie closed 1 month ago

BanneCharlie commented 1 month ago

What problem does this feature solve?

创建表格完成后,可自定义设置单元格的宽高数据, 无需拖拽的形式实现.

What does the proposed API look like?

import { IPadding } from '../Common';
export interface ITableOption {
    tdPadding?: IPadding;
    defaultTrMinHeight?: number;  // 单元格默认高度
    defaultColMinWidth?: number; // 单元格默认宽度
}
// 右键菜单注册  --> 将自定义单元格宽高的操作, 放入右键菜单中;
 instance.register.contextMenuList([
        {
            name:'自定义单元格宽度',
            when: (payload) => {
                return payload.options.mode === 'edit' || payload.isInTable;
            },
           callback(command) =>{
               // 具体实现  -->大佬这个如何实现?
           },
        },
]);
Hufe921 commented 1 month ago

不能单独设置某一个单元格的宽度,可以按列设置。

        const context = command.getRangeContext()
        command.executeUpdateElementById({
          id: context.tableElement.id,
          properties: {
            colgroup: [
              {
                width: 100
              },
              {
                width: 90
              },
              {
                width: 140
              },
              {
                width: 100
              }
            ]
          }
        })