html formatting

5 posts, 0 answers
  1. Brian
    Brian avatar
    3 posts
    Member since:
    Oct 2010

    Posted 21 Mar 2012 Link to this post

    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
  3. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 23 Mar 2012 Link to this post

    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
    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.
  5. Brian
    Brian avatar
    3 posts
    Member since:
    Oct 2010

    Posted 23 Mar 2012 Link to this post

    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. 
  7. Brian
    Brian avatar
    3 posts
    Member since:
    Oct 2010

    Posted 23 Mar 2012 Link to this post

    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.
  8.
  9. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 28 Mar 2012 Link to this post

    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
    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.
Back to Top