these pages shows the accessibility standards for tables.
https://www.w3.org/WAI/tutorials/tables/
https://www.w3.org/WAI/tutorials/tables/two-headers/
https://www.w3.org/WAI/tutorials/tables/irregular/
For these two sub links "Tables with two headers" & "Tables with irregular headers", they are looking for "scope=col", "scope=row", "scope=colgroup", "scope=rowgroup".
There doesn't seem to be any built in support for "scope" to be added when using the table wizard, having set on the Accessibility tab a Heading for both a Row & Column.
Add support for "scope" be added to tables created in the Rich Text Editor.
(https://www.telerik.com/forums/table-wizard---scope-attribute-for-tables#XKGf9DNED0a8Cdxvzh7Qvg)
Sample Page code
<h1>Editor 1</h1>
<telerik:RadEditor ID="editor1" runat="server" RenderMode="Lightweight"></telerik:RadEditor>
<h1>Editor 2</h1>
<telerik:RadEditor ID="editor2" runat="server" RenderMode="Lightweight"></telerik:RadEditor>
On Google Chrome, the following assingment ends up displaying the body of the html twice within the editor:
radEditor.Content="<HTML><HEAD><STYLE>@import url(./CSS/CI.css);</STYLE></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P></BODY></HTML>"
The resulting html becomes:
"<html><head><link href="/WebResource.axd?d=IgLlf5SIEZ-4m-Qr1qYVOGbMUL9-osMaMQXxs1c-ODIbmiiieGrgJ2ZuegoRNaCpJJ5zKojqJuk_FD7Cb69kb713UUGq1dCMsrFtihWFgnKkbYnlqQv7Lo2rUoUhmXHopZnTw7Cs3STs4GHdRuMnVHVdYHhRrcdV8Dgdv-U213Y1&t=637050242483188892" type="text/css" id="RADEDITORSTYLESHEET0" rel="stylesheet"></head><body><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p><h3>OUTPUT LAYOUT</h3><p>First Name:</p><p>Kerry</p></body></html>"
The issue is the "@import url(./CSS/CI.css);" within the Style tag, if the @import url, is removed, then it works as expected.
Works as expected on IE11.
If you add 2 <style> tags, the second one is displayed twice within the editor:radEditor.Content = "<HTML><HEAD></HEAD><BODY><H3>OUTPUT LAYOUT</H3><P>First Name:</P><P>Kerry</P><style>@import url(\"./CSS/CI.css\");</style><style>@import url(\"./CSS/CI2.css\");</style></BODY></HTML>";
The HTML source shows the property cellpadding being added but not shown in the properties window.
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<sup>−2</sup>]</th>
<th class="td_h">Tafel slope [mV decade<sup>−1</sup>]</th>
<th class="td_h">ECSA [cm<sup>2</sup>]</th>
<th class="td_h"><em>R</em><sub>ct</sub> at η = 100 mV [Ω]</th>
<th class="td_h">η @ <sub>−</sub>10 mA cm<sup>−2</sup><sub>geo</sub> [mV]</th>
<th class="td_h">η @ −0.2 mA cm<sup>−2</sup><sub>ECSA</sub> [mV]</th>
<th class="td_h">Current at η = 100 mV [mA cm<sup>−2</sup>]</th>
<th class="td_h">Mass activity at η = 100 mV [A g<sup>−1</sup>]</th>
<th class="td_h">TOF<sub>avg</sub> at η = 100 mV (H<sub>2</sub> s<sup>−1</sup>)</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">−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">−15.10</td>
<td class="td1">87.88</td>
<td class="td1">0.13</td>
</tr>
<tr>
<td class="td1">0.1 C O<sub>2</sub> 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">−24.97</td>
<td class="td1">559.87</td>
<td class="td1">6.96</td>
</tr>
<tr>
<td class="td1">2.0 C O<sub>2</sub> 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">−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">−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">−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">−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">−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
When text in the Editor has Track Changes then :
- There should be Next/Previous menu icons to navigate through the Track Changes from one Change to another
- When a Tracked Change is Accepted/Rejected the cursor should move to the next Tracked Change
The problem happens when enter a period . , single ' or " double quote on a new line.
How can I set the position of the add comment window as per by requirement?
In the normal editing mode, you can edit the table properties by right clicking inside the table to get the context menu, then choose table properties, add row etc.
In Inline editing mode, it shows the context menu but when you click on any item it says to select the table. None of the other context menu commands like inserting rows etc work.
I have tested on your demo site and you should be able to simulate it there.
Video: https://www.screencast.com/t/rzmzuZ0UFa
Steps to reproduce:
1. Open in IE 11: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Insert a video through the Media Manager
3. Click over a tool having a drop-down menu (e.g. the Format tool)
Result: The heavy-weight object of the video is shown above the shown drop-down menu.
I am facing a big problem in editor please give any solution.
Link: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
Steps to reproduce
Step 1
Try to insert table from Insert Table from editor toolbar.
Step 2
Right click on cell then click on Table/cell properties. A table wizard popup will come.
Step 3
Click on Table Layouts tab on the table wizard popup.
Step 4
Select any value from table styles drop down.
Step 5
Now you can see TABLE>TR>TD>RemoveElement on the bottom of the editor.click on RemoveElement .
After click on RemoveElement you can see STYLE>RemoveElement again click on RemoveElement.
then you can see like below in the editor.
.telerik-reTable-2 { border-collapse: collapse; border: solid 0px; font-family: Tahoma; } .telerik-reTable-2 tr.telerik-reTableHeaderRow-2 { border-width: 1.0pt 1.0pt 3.0pt 1.0pt...........
You can see this happening in the following demo page.
https://demos.telerik.com/aspnet-ajax/controls/examples/integration/ribbonbarandeditor/defaultcs.aspx?product=editor
I have also attached a snip showing this.
<telerik:RadTabStrip runat="server" ID="RadTabStrip2" MultiPageID="RadMultiPage2" SelectedIndex="0"> <Tabs> <telerik:RadTab Text="Add Response"></telerik:RadTab> </Tabs></telerik:RadTabStrip><telerik:RadMultiPage runat="server" ID="RadMultiPage2" SelectedIndex="0"> <telerik:RadPageView runat="server" ID="RadPageView11"> <telerik:RadEditor Width="100%" EditModes="Design" ID="reReqCom" runat="server" ContentAreaCssFile="~/AppRoot/Xml/RadEditor/EditorContentArea.css" ToolsFile="~/AppRoot/Xml/RadEditor/BasicTools.xml" Skin="Material" /> </telerik:RadPageView></telerik:RadMultiPage>The problem here is only using the iPhone (ioS), that the user is NOT able to select onto the RadEditor to begin typing. Seems to somehow block it out. I have stripped down to the basic code above and tested.
Can you tell us if this is a known issue?
Is there a workaround?
Don
After upgrading the Telerik controls to v2019.1.115.45 we are seeing an issue with the RadEditor control. The issue is that the Toolbar formatting buttons like Bold, Underline etc. do not work for a particular scenario.
Scenario
Here examle:
Case 1. RadEditor is LightWeight:
<telerik:RadEditor ID="redEdt" runat="server" RenderMode="LightWeight" Width="100%" Height="500px" ></telerik:RadEditor>
<script>
$(document).ready(function () {
var editor = $telerik.findControl(document.documentElement, "redEdt");
editor.enableEditing(false);
})
</script>
--> It work great. All buttons in toolbar disabled.
Case 2. RadEditor is Mobile:
<telerik:RadEditor ID="redEdt" runat="server" RenderMode="Mobile" Width="100%" Height="500px" ></telerik:RadEditor>
<script>
$(document).ready(function () {
var editor = $telerik.findControl(document.documentElement, "redEdt");
editor.enableEditing(false);
})
</script>
--> System error:
M.enableContextMenus is not a function
at c.RadEditor.enableEditing
This behavior is occuring only if use firefox browser:
1. If you set the EditModes within backend only to EditMode.Preview then all html table elements within content appears like in EditMode.Design with dashed borders.
You can reproduce it on your own demo site https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx simple disable EditMode.Html and EditMode.Design.
Now you see the dashed table element borders like in design mode....
2. Sometimes if you switch edit mode from Html to Preview the same affect is occuring with displaying dashed border with html table elements. If you switch directly from Design mode to preview mode all works fine.
3. If you resize the editor in preview mode with resize button on right lower corner the display switch immediatly to dashed borders for all html table elements...
At the moment we use a fix to reset preview mode: If only preview mode is activated for the editor we set the preview mode again with a timeout of 250 ms after loading of dialog is ready (if the timeout is to low no affect appear).
Sys.Application.add_load(function(){ window.setTimeout(function(){$find('AjaxEditorClientID').set_mode(4)},250); }); });
Regards
Thomas
Reproduction steps:
<telerik:RadEditor runat="server" ID="RadEditor1"> <Content> <span style="color: #548dd4;">asdas</span>this is sample text </Content></telerik:RadEditor>When the mode is changed to HTML, the content is as follows:
Expected:
<span style="color: #548dd4;">asdas</span>this is sample textActual:
<span style="color: rgb(84, 141, 212);">asdas</span>this is sample text
Hello,
The RadEditor's Design View became unusable in the latest Chrome Beta version (Version 73.0.3683.27). It is still working correctly on the latest stable Chrome 72, so I'm not sure if it is a problem that needs to be resolved on Chrome's end, just figured it'll be helpful to send this in as well.
The HTML view still works, but switching back to Design causes an exception (attached). This is also directly off of the demo page, so it doesn't look like implementation is a factor.