First div tag gets reformatted on save.
Original Code:
<
div
class
=
"main-block comparison"
id
=
"comparison">
<
div
class
=
"main-frame"
>
<
div
class
=
"left-col"
>
<
h2
>Product Comparison</
h2
>
<
p
>Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. </
p
>
</
div
>
<
div
class
=
"right-col"
>
<
div
class
=
"image-holder"
> <
img
src
=
"_themes/v2/images/img.png"
alt
=
""
/></
div
>
<
a
href
=
"#"
class
=
"launch-btn"
><
span
>Click to Launch Comparison Tool</
span
></
a
>
</
div
>
</
div
>
</
div
>
And it gets reformatted as:
<
div
class
=
"main-block"
>
I tried adding StripFormattingOptions="noneSupressCleanMessage" and ConvertToXhtml="false"
to see if that made a difference.
Telerik dll version: 2011.3.1115.40
4 Answers, 1 is accepted
0
Hello,
I was unable to reproduce the problem as you can see in the following video: http://screencast.com/t/MiWYMskNa. Am I missing something some step? Note that I have not disabled any filters of RadEditor.
Are you able to reproduce it in the Default example as well as in the attached sample project and under which browser? Is the problem only reproducible in version: 2011.3.1115.40.
Greetings,
Rumen
the Telerik team
I was unable to reproduce the problem as you can see in the following video: http://screencast.com/t/MiWYMskNa. Am I missing something some step? Note that I have not disabled any filters of RadEditor.
Are you able to reproduce it in the Default example as well as in the attached sample project and under which browser? Is the problem only reproducible in version: 2011.3.1115.40.
Greetings,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Brian
Top achievements
Rank 1
answered on 23 Mar 2012, 03:12 PM
Using the default example, I am not able to reproduce this.
Using my application, I can paste my html in no problem and swtich between design and html view. This does not change/reformat my text. When I hit save is when it seems to modify the html.
My editor tag/code is below. Is there anything in there that could be causing this?
Stepping through the debugger on my button save event shows the html is getting reformatted before it gets written/saved to the db.
Using my application, I can paste my html in no problem and swtich between design and html view. This does not change/reformat my text. When I hit save is when it seems to modify the html.
My editor tag/code is below. Is there anything in there that could be causing this?
<
telerik:RadEditor
runat
=
"server"
ID
=
"radEdit"
Skin
=
"Default"
SkinID
=
"DefaultSetOfTools"
ContentAreaMode
=
"Div"
Width
=
"100%"
Height
=
"450px"
EnableResize
=
"false"
ToolsFile
=
"~/_controls/ctlWYSIWYGEditor/ctlWYSIWYGEditor.xml"
OnClientCommandExecuting
=
"ExecuteCommand"
OnClientPasteHtml
=
"OnClientPasteHtml"
ExternalDialogsPath
=
"~/_controls/ctlWYSIWYGEditor/EditorDialogs/"
>
<
ImageManager
ViewPaths
=
"/_images/WYSIWYGEditor/ImageManager/"
EnableImageEditor
=
"false"
></
ImageManager
>
<
SpellCheckSettings
DictionaryPath
=
"~/App_Data/RadSpell/"
/>
</
telerik:RadEditor
>
<
script
type
=
"text/javascript"
>
function OnClientPasteHtml(sender, args) {
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "ImageManager") {
//See if an img has an alt tag set
var div = document.createElement("DIV");
//Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
//This is a severe IE quirk.
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
//Now check if there is alt attribute
var img = div.firstChild;
img.setAttribute("width", "100");
img.setAttribute("height", "100");
//Set new content to be pasted into the editor
args.set_value(div.innerHTML);
}
}
function ExecuteCommand(editor, args) {
var name = args.get_name();
var val = args.get_value();
if (name == "Logos" || name == "MyClipArt" || name == "Signatures") {
editor.pasteHtml("<
img
src
=
'" + val + "'
>");
//Cancel the further execution of the command as such a command does not exist in the editor command list
args.set_cancel(true);
}
}
</
script
>
Stepping through the debugger on my button save event shows the html is getting reformatted before it gets written/saved to the db.
0
Brian
Top achievements
Rank 1
answered on 23 Mar 2012, 06:48 PM
I can successfully replicate both success and failure of this issue with the following:
This works and saves data correctly:
- paste my html in html view
- switch to design view
- save my content
This doesn't and reformats html on save:
- paste my html in html view
- while still in html view I hit save
I tried both the above in IE9 and Chrome. both browsers yeilded same results.
This works and saves data correctly:
- paste my html in html view
- switch to design view
- save my content
This doesn't and reformats html on save:
- paste my html in html view
- while still in html view I hit save
I tried both the above in IE9 and Chrome. both browsers yeilded same results.
0
Hi,
Thank you for the detailed steps.
To fix the problem attach to the OnClientSubmit event of RadEditor and switch the mode to Design before submitting the content, e.g.
Another approach is to render the content area as an iframe element by setting ContentAreaMode="Iframe".
Best regards,
Rumen
the Telerik team
Thank you for the detailed steps.
To fix the problem attach to the OnClientSubmit event of RadEditor and switch the mode to Design before submitting the content, e.g.
<telerik:RadEditor runat=
"server"
ID=
"radEdit"
Skin=
"Default"
SkinID=
"DefaultSetOfTools"
ContentAreaMode=
"Div"
Width=
"100%"
Height=
"450px"
EnableResize=
"false"
_ToolsFile=
"~/_controls/ctlWYSIWYGEditor/ctlWYSIWYGEditor.xml"
OnClientCommandExecuting=
"ExecuteCommand"
OnClientPasteHtml=
"OnClientPasteHtml"
OnClientSubmit=
"OnClientSubmit"
_ExternalDialogsPath=
"~/_controls/ctlWYSIWYGEditor/EditorDialogs/"
>
<ImageManager ViewPaths=
"/_images/WYSIWYGEditor/ImageManager/"
EnableImageEditor=
"false"
></ImageManager>
<SpellCheckSettings DictionaryPath=
"~/App_Data/RadSpell/"
/>
</telerik:RadEditor>
<asp:Button ID=
"Button1"
runat=
"server"
Text=
"Submit"
OnClick=
"Button1_Click"
/>
<script type=
"text/javascript"
>
function
OnClientSubmit(sender, args) {
sender.set_mode(1);
}
function
OnClientPasteHtml(sender, args) {
var
commandName = args.get_commandName();
var
value = args.get_value();
if
(commandName ==
"ImageManager"
) {
//See if an img has an alt tag set
var
div = document.createElement(
"DIV"
);
//Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
//This is a severe IE quirk.
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
//Now check if there is alt attribute
var
img = div.firstChild;
img.setAttribute(
"width"
,
"100"
);
img.setAttribute(
"height"
,
"100"
);
//Set new content to be pasted into the editor
args.set_value(div.innerHTML);
}
}
function
ExecuteCommand(editor, args) {
var
name = args.get_name();
var
val = args.get_value();
if
(name ==
"Logos"
|| name ==
"MyClipArt"
|| name ==
"Signatures"
) {
editor.pasteHtml(
"<img src='"
+ val +
"'>"
);
//Cancel the further execution of the command as such a command does not exist in the editor command list
args.set_cancel(
true
);
}
}
</script>
Another approach is to render the content area as an iframe element by setting ContentAreaMode="Iframe".
Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.