如何将由 InsertTable 命令生成的表格包装在 div 中答案

【问题标题】：How to wrap table generated by InsertTable command inside a div如何将由 InsertTable 命令生成的表格包装在 div 中
【发布时间】：2019-03-29 15:30:13
【问题描述】：

我在我看过的一个教程中看到了这段代码，但是这个代码向table 元素添加了类。

var RadEditorCommandList = Telerik.Web.UI.Editor.CommandList;

var table = RadEditorCommandList["InsertTable"];
RadEditorCommandList["InsertTable"] = function (commandName, editor, args) {
    table(commandName, editor, args);
    var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
    p.classList.add("editor-table")
};

我想知道如果我想将表格包装在 div 中，如何扩展此命令，这是我失败的尝试（它不再在编辑器上显示表格）：

var table = Telerik.Web.UI.Editor.CommandList['InsertTable'];
Telerik.Web.UI.Editor.CommandList['InsertTable'] = function(
  commandName,
  editor,
  args
) {
  table(commandName, editor, args);
  var wrapper = document.createElement('div');
  wrapper.classList.add('table-wrapper');
  var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
  wrapper.appendChild(p);
};

【问题讨论】：

标签： javascript telerik rte

【解决方案1】：

使用OnClientPasteHtml client-event，通过args.get_value()方法获取插入的表，修改为div包装器，通过args.set_value()方法粘贴。

您可以在https://www.telerik.com/support/kb/aspnet-ajax/editor/details/inserting-new-tables-with-a-header-row-as-default查看示例

【讨论】：