[Solved] html formatting

[Brian]

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

[Rumen]

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

[Brian]

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?

<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. 

[Brian]

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.

[Rumen]

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.

<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