Deleting of a table by delete or backspace key does not work when the selection contains only the table.
Steps to reproduce:
1. Set the following content
<p>test p1</p>
<table>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
<p>test p2</p>
2. Select the table only and press delete or backspace key
Actual: Only the content has been deleted.
Expected: The table and its content to be deleted.
Workaround:
<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
(function () {
var $T = Telerik.Web.UI;
var utils = $T.Editor.Utils;
var isTableSelected = function (selected) {
if (utils.isTag(selected, "table")) {
return true;
}
var table = utils.getElementParentByTag(selected, "TABLE");
return table && !!utils.getElementParentByCondition(selected, function (current) {
return utils.isAncestorOrSelf(table, current) && utils.isSingleChild(current);
});
};
// Fix for delete table by delete or backspace key
var formatFragments = $T.Editor.DeleteSelectionCommand.prototype.formatFragments;
$T.Editor.DeleteSelectionCommand.prototype.formatFragments = function (fragments) {
var cmd = this;
var selected = cmd.get_editor().getSelectedElement();
if (isTableSelected(selected) && fragments.length) {
var table = utils.isTag(selected, "table") ? selected : utils.getElementParentByTag(selected, "TABLE");
var $table = $telerik.$(table);
var data = $table.find("th,td");
var firstCell = data.first().get(0);
var lastCell = data.last().get(0);
var firstFragment = fragments[0];
var lastFragment = fragments[fragments.length - 1];
var firstSelected = firstFragment.nodes[0];
var lastSelected = lastFragment.nodes[lastFragment.nodes.length - 1];
if ((firstSelected == firstCell || firstSelected == firstCell.firstChild || cmd.isMarker(firstCell.firstChild)) &&
(lastSelected == lastCell || lastSelected == lastCell.lastChild)) {
$table.find("." + cmd.getMarkersCssClass()).insertBefore(table);
$telerik.$(table).remove();
return;
}
}
formatFragments.call(cmd, fragments);
};
// Fix for select and delete a table by the DomInspector in Chrome
var Modules = $T.Editor.Modules;
if (Modules && Modules.RadEditorDomInspector) {
var removeSelectedElement = Modules.RadEditorDomInspector.prototype.removeSelectedElement;
Modules.RadEditorDomInspector.prototype.removeSelectedElement = function (element) {
if (isTableSelected(element)) {
element = utils.isTag(element, "table") ? element : utils.getElementParentByTag(element, "TABLE");
}
removeSelectedElement.call(this, element);
};
}
})();
</script>