From the demo page at Editor when adding a table from the toolbar and setting cellpadding to it from the Table Properties window (got by right click the table and selecting table properties) does not show the set properties only the height and the width gets shown remaining properties do not get shown.

The HTML source shows the property cellpadding being added but not shown in the properties window.

In RadEditor, when creating a table, then going to the Table Properties/Style builder/Border option, the Border Width information is pushed down and not all options are accessible.

Hi Rumen,

 

I have encountered a problem as follows:

When a table is added to the radeditor with empty cells, after inserting text in  the empty cell and rejecting the track changes, the complete td (cell) is removed.

Figure shows text inserted in empty cell with track changes on

After rejecting this track changes:

The cell has been removed and you can see the space in the end

You can use the following table code to reproduce the same, I have tried this in the demo link: https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx

<table frame="topbot" class="body_table">
    <thead>
        <tr>
            <th class="td_h">Catalyst</th>
            <th class="td_h">Loading [mg cm^&minus;2]</th>
            <th class="td_h">Tafel slope [mV decade^&minus;1]</th>
            <th class="td_h">ECSA [cm²]</th>
            <th class="td_h"><em>R</em>_ct at &eta; = 100 mV [&Omega;]</th>
            <th class="td_h">&eta; @ _&minus;10 mA cm^&minus;2_geo [mV]</th>
            <th class="td_h">&eta; @ &minus;0.2 mA cm^&minus;2_ECSA [mV]</th>
            <th class="td_h">Current at &eta; = 100 mV [mA cm^&minus;2]</th>
            <th class="td_h">Mass activity at &eta; = 100 mV [A g^&minus;1]</th>
            <th class="td_h">TOF_avg at &eta; = 100 mV (H₂ s^&minus;1)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="td1">0.1 C anodized</td>
            <td class="td1">0.081</td>
            <td class="td1">52</td>
            <td class="td1"><ins author="RadEditorUser" command="Insert" timestamp="1572804414617" title="Inserted by RadEditorUser on 11/3/2019, 11:36:54 PM" class="reU0">fdff</ins></td>
            <td class="td1">4.6</td>
            <td class="td1">51</td>
            <td class="td1">74</td>
            <td class="td1">&minus;67.00</td>
            <td class="td1">827.55</td>
            <td class="td1">0.93</td>
        </tr>
        <tr>
            <td class="td1">2.0 C anodized</td>
            <td class="td1">0.172</td>
            <td class="td1">78</td>
            <td class="td1">191.9</td>
            <td class="td1">7.6</td>
            <td class="td1">88</td>
            <td class="td1">122</td>
            <td class="td1">&minus;15.10</td>
            <td class="td1">87.88</td>
            <td class="td1">0.13</td>
        </tr>
        <tr>
            <td class="td1">0.1 C O₂ plasma</td>
            <td class="td1">0.045</td>
            <td class="td1">48</td>
            <td class="td1">5.8</td>
            <td class="td1">3.9</td>
            <td class="td1">78</td>
            <td class="td1">34</td>
            <td class="td1">&minus;24.97</td>
            <td class="td1">559.87</td>
            <td class="td1">6.96</td>
        </tr>
        <tr>
            <td class="td1">2.0 C O₂ plasma</td>
            <td class="td1">0.177</td>
            <td class="td1">84</td>
            <td class="td1">103.4</td>
            <td class="td1">5.0</td>
            <td class="td1">123</td>
            <td class="td1">146</td>
            <td class="td1">&minus;4.65</td>
            <td class="td1">26.25</td>
            <td class="td1">0.072</td>
        </tr>
        <tr>
            <td class="td1">0.1 C heat</td>
            <td class="td1">0.037</td>
            <td class="td1">58</td>
            <td class="td1">7.6</td>
            <td class="td1">94.1</td>
            <td class="td1">163</td>
            <td class="td1">110</td>
            <td class="td1">&minus;0.95</td>
            <td class="td1">25.75</td>
            <td class="td1">0.302</td>
        </tr>
        <tr>
            <td class="td1">2.0 C heat</td>
            <td class="td1">0.630</td>
            <td class="td1">80</td>
            <td class="td1">11.5</td>
            <td class="td1">36.6</td>
            <td class="td1">106</td>
            <td class="td1">65</td>
            <td class="td1">&minus;8.24</td>
            <td class="td1">13.07</td>
            <td class="td1">0.662</td>
        </tr>
        <tr>
            <td class="td1">0.1 C acid</td>
            <td class="td1">0.103</td>
            <td class="td1">70</td>
            <td class="td1">11.1</td>
            <td class="td1">165.2</td>
            <td class="td1">162</td>
            <td class="td1">126</td>
            <td class="td1">&minus;2.09</td>
            <td class="td1"></td>
            <td class="td1">0.199</td>
        </tr>
        <tr>
            <td class="td1">2.0 C acid</td>
            <td class="td1">0.683</td>
            <td class="td1">75</td>
            <td class="td1">22.9</td>
            <td class="td1">14.1</td>
            <td class="td1">102</td>
            <td class="td1">101</td>
            <td class="td1">&minus;9.48</td>
            <td class="td1">13.88</td>
            <td class="td1">1.15</td>
        </tr>
    </tbody>
</table>

Do let me know if you need any further information on the same.

Thanks

Regards

Chetan

 

 

Improve XSS filtering.

The problem appears to be related to the image and table resizing feature (introduced in Q3 2013), implemented for the Chrome browser. When the content has a large amount of nested tables with images, selecting an image is causing a slow operation and even an unexpected crash of the browser. 

With this example code you can disable the feature and resolve the performance issue:

<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
	Telerik.Web.UI.RadEditor.prototype._initializeResizableWidget =
		function myfunction() { };
</script>

Note that this line of code will disable the image/table resizing only for Chrome. Under Firefox and IE this feature is provided by the browser and will still be available.

When you resize the RadEditor beyond the boundaries of the browser's viewport, absolute positioning will be applied to the control, which could result in problems with the layout in certain cases.

You can use the following workaround to fix the positioning of the editor until the problem is resolved. Just add the script below at the end of your page:

<script type="text/javascript">
                var onResizeStart = Telerik.Web.UI.RadEditor.prototype.onResizeStart;
                Telerik.Web.UI.RadEditor.prototype.onResizeStart = function() {
                                var editorWrapper = this.get_element();
                                this.resizeStartPosition = {
                                                position: editorWrapper.style.position,
                                                top: editorWrapper.style.top,
                                                left: editorWrapper.style.left
                                };
                                onResizeStart.call(this);
                }

                var onResizeEnd = Telerik.Web.UI.RadEditor.prototype.onResizeEnd;
                Telerik.Web.UI.RadEditor.prototype.onResizeEnd = function() {
                                var editorWrapper = this.get_element();
                                if (this.resizeStartPosition && this.resizeStartPosition.position != editorWrapper.style.position) {                                             
                                                $telerik.$(editorWrapper).css({
                                                                position: this.resizeStartPosition.position,
                                                                top: this.resizeStartPosition.top,
                                                                left: this.resizeStartPosition.left
                                                });
                                }
                                onResizeEnd.call(this);
                }
</script>

When the content area mode is a Div element, every ajax post back is causing a flickering of the content.

When an Image or a Table elements are being inserted into the content of the editor, the undo command should revert the insertion.

When you copy a table from MS Excel and you paste it in the RadEditor under Chrome, an image that depicts the copied table will be inserted in the content area of the control along with the table.

You can use the following workaround to avoid inserting an image with the table:

        <telerik:RadEditor runat="server" ID="RadEditor1">
        </telerik:RadEditor>

        <script type="text/javascript">
            var getImages = Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages;
            Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages = function (event) {
                var images = getImages.call(this, event);
                debugger;
                if (event.clipboardData && images.length && event.clipboardData.getData("text/html")) {

                    return [];
                }

                return images;
            };
        </script>

Inserting a table is causing the user to switch to HTML mode and insert manually a br element, so that he could start typing in the next line.

Possible solution is attaching this Client-side method on the OnClientCommandExecuted event of the RadEditor control:

<telerik:RadEditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted"></telerik:RadEditor>


<script type="text/javascript">
    function OnClientCommandExecuted(editor, args) {
        var command = args.get_commandName();
        if (command = "InsertTable") {
            var selection = editor.getSelection();
            var range = selection.getRange();
            if (range.pasteHTML) {
                range.pasteHTML("<br />");
            }
            else {
                editor.pasteHtml("<br/>");
            }
        }
    }
</script>

The following workaround entirely changes the behavior by modifying the selection and selects the first TD

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
</telerik:RadEditor>

<script type="text/javascript">
    var identifierID = "RadEditor_AfterTable";

    function OnClientPasteHtml(editor, args) {
        var commandName = args.get_commandName();

        if (commandName === "InsertTable" || commandName === "TableWizard" ) {
            var currValue = args.get_value();
            currValue = currValue.replace(/<\/table>/gi, "</table><div id=" + identifierID + ">&#x200B;</div>");
            //currValue = currValue + "<div id=" + identifierID + ">&#x200B;</div>";
            
            args.set_value(currValue);
            setTimeout(function () {
                selectFirstTD(editor)
            }, 0);
        }
    }

    function selectFirstTD(editor) {
        var $ = $telerik.$;
        var contBody = editor.get_contentArea();
        var identifier = $(contBody).find("#" + identifierID);
        var table = identifier.prev();
        var elmToSelect = table.find("th")[0] || table.find("td")[0];

        if (elmToSelect.childNodes && !$telerik.isIE) {
            elmToSelect = elmToSelect.childNodes[0].nodeName === "#text" && elmToSelect.childNodes[0];
        }

        var hasNextElement = identifier.next()[0];
        
        while (hasNextElement && $(hasNextElement).is("style")) {
            hasNextElement = $(hasNextElement).next()[0];
        }
        
        editor.selectElement(elmToSelect);

        if (!hasNextElement) {
            table.after("<br/>");
        }

        identifier.remove();
    }
</script>

The main issue is the inconsistent behavior of the borders around the content area.

The initial problem is related with the JS error, because of which the editor's initialization is interrupted.  

You can workaround this by incorporating this piece of code:

<telerik:RadWindow ID="RadWindow1" runat="server" Width="805" Height="450" VisibleOnPageLoad="true">
	<ContentTemplate>
		<telerik:RadEditor runat="server" ID="RadEditor1" Height="200" Width="400" >
		</telerik:RadEditor>
	</ContentTemplate>
</telerik:RadWindow>

<script type="text/javascript">
	var oldCommand = Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit;

	Telerik.Web.UI.RadEditor.prototype.toggleEnhancedEdit = function (newValue) {
		if ($telerik.isSafari && typeof (newValue) != "undefined" && false == this.disableContentAreaStylesheet(newValue)) {
			window.setTimeout(Function.createDelegate(this, function () {
				this.disableContentAreaStylesheet(newValue);
			}), 200);
		} else {
			oldCommand.call(this, newValue);

		}
	};
</script>

If a list is created and every bullet is with different stylization. Stripping all formatting is causing the content to be inserted into one bullet and the styles are not correctly stripped. 

When you add a symbol to the end of a line in IE, the cursor moves down to the next line.  This behavior does not exist in FF or Chrome, and it did not exist for IE in previous versions of the Editor.

Here is a video demonstrating the problem using the Telerik demo editor.

http://screencast.com/t/9S0TjfZzyFqj

When the Template Manager tool of RadEditor is enabled, the content of its dialog window is not loaded under IE.

When an edited image is saved in the Editor's ImageManager, the file is selected but the preview/properties areas on the right are not active. The user should click first on another image and then come back to the edited one, in order to be able to preview it or to change its properties.
Video, demonstrating the behavior: http://screencast.com/t/DAtzhgalHvA

1. Go to http:/demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Choose the bullet list command from the toolbar and type some text
3. Choose the FormatCodeBlock command and insert some text
4. Press SHIFT+ENTER to insert <br>

Actual: If you continue pressing enter, new lines will not be inserted.
Expected: New lines are inserted.

Under IE the get_text() retrieves only one word if there are many in the cells of a table.

This breaks the result of the RadEditorStatistics tool.

When multiple instances of RadEditor are placed inside hidden ASP Panel (visible='false') which is ajaxified with RadAjaxManager/RadAjaxPanel, and then the visibility of the ASP Panel is switched to true, the Statistics Module of the second, third.. Editors display 'undefined'. The issue is observed under Internet Explorer.

The workaround is to use:

-either ASP:UpdatePanel instead of the RadAjaxManager/RadAjaxPanel

-OR use the following JavaScript override:

            Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.doCount = function () {
            
                if (!this.get_visible()) return;

                var content = this.get_editor().get_text();

                var words = 0;
                var chars = 0;
                if (content) {
                    var punctRegX = /[!\.?;,:&_\-\–\{\}\[\]\(\)~#'"]/g;
                    content = content.replace(punctRegX, "");
                    var trimRegX = /(^\s+)|(\s+$)/g;
                    content = content.replace(trimRegX, "");
                    if (content) {
                        var splitRegX = /\s+/;
                        var array = content.split(splitRegX);

                        words = array.length;

                        var newLines = /(\r\n)+/g;
                        content = content.replace(newLines, "");
                        chars = content.length;
                    }
                }

                var elem = this.get_element();
                elem.innerHTML = "<span style='line-height:22px'>" + "Words:" + " " + words + "   " + "Characters:" + " " + chars + " </span>";
            }

In order to make the above function override working, it must be placed:

-Either below the RadScriptManager and load all the necessary resources through ScriptReferences of the RadScriptManager (disable the embedded resources of the RadEditors' instances too)

-OR create an additional instance of RadEditor in a hidden div, outside the AjaxPanel and place the function override below it.