Hi,
Anyone had issue with RichText editor automatically replacing double quote " with single quote ' and vice versa, when toggling between Design and HTML mode? I have tested all options under "BUILT-IN FILTERS CONFIGURATOR" and they all switched the double quote with single quote and vice versa, which breaks the HTML5 data attribute element as the single quote formatting is important for JSON specification.
https://demos.telerik.com/aspnet-ajax/editor/examples/builtincontentfilters/defaultcs.aspx
I have attached a snippet of the code, which shows data-wb-geomap element's single quote got replaced with double quote after toggling between Design and HTML mode.
Before (HTML mode):
<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap='{
"tables": [{
"title": "Test",
"caption": "Test",
"id": "test",
"zoom": true,
"tab": true,
"type": "symbol"
}
}]
}'>
After (Design mode):
<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap="{
'tables': [{
'title': 'Test',
'caption': 'Test',
'id': 'test',
'zoom': true,
'tab': true,
'type': 'symbol'
}
}]
}'>
1 Answer, 1 is accepted
Hi Karen,
RadEditor's content area is a standard editable div/iframe element that uses the browser's underlying rich text editing engine to provide the rendering of the HTML elements.
The reported behavior is due to the browser engine and can be verified by testing the scenario in an editable div/iframe in this dojo project:
- Goo to https://dojo.telerik.com/UlaCozIk and press the Run button
- Place the HTML in the textarea next to the div / iframe element:
<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap='{ "tables": [{ "title": "Test", "caption": "Test", "id": "test", "zoom": true, "tab": true, "type": "symbol" } }] }'> - Press the << button to load the textarea contents into the editable div/iframe.
- Press the >> button to load the iframe/div contents back into the textarea. Now, you will see the HTML modified by the browser:As you can see the double quotes are transformed to " HTML entities.
<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap="{ "tables": [{ "title": "Test", "caption": "Test", "id": "test", "zoom": true, "tab": true, "type": "symbol" } }] }"></div>
The scenario is also shown in the following video: https://youtu.be/tCkT_gikhww. - As shown in the following video https://youtu.be/s1LCzDLRnSo the ConvertToXhtml content filter (when enabled) handles the scenario by converting the " entities in the attribute value to ' quote characters:
<div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap="{ 'tables': [{ 'title': 'Test', 'caption': 'Test', 'id': 'test', 'zoom': true, 'tab': true, 'type': 'symbol' } }] }"> </div>
When the ConvertToXhtml filter is disabled you can see the same browser behavior as in the editable div/iframe dojo example.
Regards,
Rumen
Progress Telerik
Rank 1
Hi Rumen,
Thanks for the detail demos. Are we saying that there's no fix to this issue due to browser behaviour?
I tried having "ConvertToXhtml content filter" set to enabled and pasted the script but the quotes still got flipped, as shown in the screen capture below.
Seems like the quotes get swapped no matter which scenario?
Karen
Your video represents the same test shown in my video starting at 0:26 seconds: https://youtu.be/s1LCzDLRnSo?t=26.
Since this scenario cannot be handled reliably on the client side due to browser modifying the quotes in the attribute and value, you can try implementing a server side solution based on regular expressions after obtaining the content via the RadEditor.Content property:
ASPX.CS
protected void HandleEditorContent(object sender, EventArgs e)
{
// Retrieve the content from RadEditor and convert HTML entities to actual quotes
string correctedContent = RadEditor1.Content.Replace(""", "\"");
// Regex pattern to locate and match the entire content of the data-wb-geomap attribute in double quotes
string pattern = @"(data-wb-geomap="")([^""]*?)("")";
// Replace problematic internal single quotes within the JSON object while replacing the outer double quotes with single quotes
correctedContent = Regex.Replace(correctedContent, pattern, delegate (Match m)
{
// Replace internal single quotes with double quotes only within the JSON string
string jsonContent = m.Groups[2].Value.Replace("'", "\"");
// Return the corrected JSON within its original single-quoted attribute by replacing the double quotes with single quotes
return "data-wb-geomap='" + jsonContent + "'";
});
// Display the corrected content in TextArea
TextArea1.Text = correctedContent;
}ASPX
<telerik:RadEditor runat="server" ID="RadEditor1" Height="600px" >
<Content></Content>
<Modules>
<telerik:EditorModule Name="RadEditorStatistics" Visible="true" />
<telerik:EditorModule Name="RadEditorDomInspector" Visible="true" />
<telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" />
<telerik:EditorModule Name="RadEditorHtmlInspector" Visible="true" />
</Modules>
<Content>
test <div id="geomap1" class="wb-geomap position scaleline geocoder geolocation mapcontrols" data-wb-geomap='{
"tables": [{
"title": "Test",
"caption": "Test",
"id": "test",
"zoom": true,
"tab": true,
"type": "symbol"
}
}]
}'></div> test <strong>test </strong>
</Content>
</telerik:RadEditor>
<asp:Button Text="Submit" OnClick="HandleEditorContent" runat="server" />
<asp:TextBox runat="server" TextMode="MultiLine" Width="1000px" Height="800px" ID="TextArea1" />
Rank 1
Hi Rumen,
Thanks for confirming that custom code is needed and the issue is not supported with the out of the box features due to browser behaviour.
Karen