将 ag-grid 的单元格编辑器替换为 tinymce 编辑器

Question

How can we add tinymce editor in the place of editor present in the cell of ag-grid?我们如何在 ag-grid 单元格中的编辑器位置添加 tinymce 编辑器？

Answer 1

In order to customize ag-grid's cell's you need to create a custom Cell Renderer component.为了自定义 ag-grid 的单元格，您需要创建一个自定义 Cell Renderer 组件。

You can pretty much put anything you want in that custom component, including tinyMCE.您几乎可以在该自定义组件中放入任何您想要的内容，包括 tinyMCE。

More info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/更多信息： https://www.ag-grid.com/javascript-grid-cell-rendering-components/

Answer 2

Please see Cell Renderer请参阅单元格渲染器

index.html index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script>var __basePath = './';</script>
    <style media="only screen">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        html {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            padding: 1rem;
            overflow: auto;
        }
    </style>
            <script src="https://unpkg.com/@ag-grid-community/all-modules@24.1.0/dist/ag-grid-community.min.js"></script>
    </head>

<body>
    <div id="myGrid" style="height: 100%;width: 100%" class="ag-theme-alpine"></div>

    <script src="main.js"></script>
</body>
</html>

main.js主程序

var columnDefs = [
    { field: 'athlete' },
    { field: 'country' },
    { field: 'year', width: 100 },
    { field: 'gold', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'silver', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'bronze', width: 100, cellRenderer: 'medalCellRenderer' },
    { field: 'total', width: 100 }
];

var gridOptions = {
    columnDefs: columnDefs,
    components: {
        'medalCellRenderer': MedalCellRenderer
    },
    defaultColDef: {
        editable: true,
        sortable: true,
        flex: 1,
        minWidth: 100,
        filter: true,
        resizable: true
    }
};

// cell renderer class
function MedalCellRenderer() {
}

// init method gets the details of the cell to be renderer
MedalCellRenderer.prototype.init = function(params) {
    this.eGui = document.createElement('span');
    var text = '';
    // one star for each medal
    for (var i = 0; i < params.value; i++) {
        text += '#';
    }
    this.eGui.innerHTML = text;
};

MedalCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid.simpleHttpRequest({ url: 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' })
        .then(function(data) {
            gridOptions.api.setRowData(data);
        });
});

将 ag-grid 的单元格编辑器替换为 tinymce 编辑器

问题描述

2 个解决方案

解决方案1
2 2020-12-02 06:36:53

解决方案2
1 2020-12-02 07:27:45

将 ag-grid 的单元格编辑器替换为 tinymce 编辑器

问题描述

2 个解决方案

解决方案1 2 2020-12-02 06:36:53

解决方案2 1 2020-12-02 07:27:45

解决方案1
2 2020-12-02 06:36:53

解决方案2
1 2020-12-02 07:27:45