如何将 InsertTable 命令生成的 table 包装在 div 中

Question

我在我看过的其中一个教程中看到了这段代码，但是这个代码将 class 添加到 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")
};

我想知道如果我想将 table 包装在 div 中，我该如何扩展这个命令，这是我失败的尝试（它没有显示 table不再是编辑):

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

Answer 1

使用OnClientPasteHtml client-event，在这里你可以通过args.get_value()方法获得插入的table，将其修改为div包装器并粘贴通过 args.set_value() 方法。

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

查看示例

如何将 InsertTable 命令生成的 table 包装在 div 中

How to wrap table generated by InsertTable command inside a div

javascript

telerik

rte