用 tinymce 编辑器替换单元格的 ag-grid 编辑器
Posted
技术标签:
【中文标题】用 tinymce 编辑器替换单元格的 ag-grid 编辑器【英文标题】：Replace cell's editor of ag-grid with tinymce editor 【发布时间】：2021-03-14 02:00:19 【问题描述】：我们如何在 ag-grid 单元格中的编辑器位置添加 tinymce 编辑器？
【问题讨论】：
【参考方案1】：为了自定义 ag-grid 的单元格，您需要创建一个自定义单元格渲染器组件。
您几乎可以在该自定义组件中放入任何您想要的东西，包括 tinyMCE。
更多信息：https://www.ag-grid.com/javascript-grid-cell-rendering-components/
【讨论】：
【参考方案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);
);
);
【讨论】：
以上是关于用 tinymce 编辑器替换单元格的 ag-grid 编辑器的主要内容，如果未能解决你的问题，请参考以下文章