用 tinymce 编辑器替换单元格的 ag-grid 编辑器答案

【问题标题】：Replace cell's editor of ag-grid with tinymce editor用 tinymce 编辑器替换单元格的 ag-grid 编辑器
【发布时间】：2021-03-14 02:00:19
【问题描述】：

我们如何在 ag-grid 单元格中的编辑器位置添加 tinymce 编辑器？

【问题讨论】：

标签： html angular ag-grid

【解决方案1】：

为了自定义 ag-grid 的单元格，您需要创建一个自定义单元格渲染器组件。

您几乎可以在该自定义组件中放入任何您想要的东西，包括 tinyMCE。

【讨论】：

【解决方案2】：

请看Cell Renderer

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);
        });
});

【讨论】：