Some issues with working in the editor

21 posts, 0 answers
  1. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 21 Apr 2015 Link to this post

    Hi,

    We have found some issues while working with the editor.

    Issue 1: Image Map Editor
    Click on an image in the editor and open the image map editor with your right mouse button. Add an area with same size as the image itself. After OK, you can't select image anymore, even the right mouse menu is not working anymore. So editing area's and image itself after that is not possible anymore. Tested in Chrome and reproduced in your demos. 

    Issue 2: Crash on switching between HTML and Design mode
    After some changes in the HTML mode, the editor crashed with a javascript error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. Tested in Chrome, but not reproduceable in your demos. It seems this causes by the RadWindowManager which is added in a same page as the editor. But the error is known by you?

    Issue 3: Crazy attributes and HTML elements
    When an user is working with the editor (adding an image, typing a text, changes size of a text, etc etc), sometimes the editor will add crazy attributes to the BODY element or adds HTML spans. This are very hard to reproduce, and there are no cases which this issue can be reproduced each times. 
    - contenteditable="true" in the body element. It happened a few times here and with our users. We have fixed this by removing this attribute with client script but it have to be fixed in the editor itself. Seems an known issue here at the forum, but no fix...
    - jquery111108884286452584759="5" in the body element. Seems happens while working with image map editor, but not each time.
    - <span class="__red_marker" /> or in that way. Added after BODY element.

    I hope you can help me out with this issues.

    Kind regards,
    Jelle

  2. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 21 Apr 2015 Link to this post

    In addition to issue 2, this happens while switching from HTML to Design mode after some changes in the HTML. 
  3. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 21 Apr 2015 Link to this post

    In addition to issue 3, the STYLE block will be modified sometimes, all media queries will be deleted. Very hard to reproduce as well, happens in Chrome and Internet Explorer. 
  4. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 22 Apr 2015 Link to this post

    In addition to issue 3: the marker spans are this:

    <span class="__telerik_marker __telerik_marker_end"></span><span class="__telerik_marker __telerik_marker_end"></span><span class="__telerik_marker __telerik_marker_end"></span><span class="__telerik_marker __telerik_marker_end"></span>

  5. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 23 Apr 2015 Link to this post

    Issue 4: Search and Replace
    With 2014 Q2 version, the search and replace in the HTML mode is not working properly. One for one search and replace works but the button REPLACE ALL returns 'the string was not found' all times. It seems be fixed in the latest version but we need to fix it in our version wothout upgrading to the latest version. Is this possible, with some custom javascript?

  6. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 23 Apr 2015 Link to this post

    More crazy codes found:
    <div unselectable="on" class="rrHandle rrNE" style="position: absolute; cursor: ne-resize; z-index: auto; height: 7px; width: 7px; top: 1537.49999976158px; left: 1084.49999976158px;"></div>

  7. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 23 Apr 2015 Link to this post

    We have added a custom script when save button is pressed to remove all crazy html codes from the content. Not very beattiful solution, but we have do this because the resulted html code will not be redended properly. The contenteditable="true" will prevent all links to work and all content are moveable and editable outside the editor... Hopefully you will fix this in the next version. 

    Maybe someone can use the following script? 

    function FixElements() {
        var editor = $find("radEditor31");
        var oDocument = editor.get_document();
      
        $(oDocument.body).removeAttr("contenteditable");
        $(oDocument.body).find("div.rrHandle").remove();
        $(oDocument.body).find("span.__telerik_marker").remove();
        $(oDocument.body).find("span.__telerik_marker_end").remove();
        RemoveAttributesStartsWith(oDocument.body, "jquery");
    }
      
    function RemoveAttributesStartsWith(strTarget, strStartsWith) {
        var intLoop;
        var oTarget = $(strTarget);
        var arrAttrsToDelete = [];
        var arrAttrs = oTarget.get(0).attributes;
            var intAttrsLen = arrAttrs.length;
       
        for (intLoop = 0; intLoop < intAttrsLen; intLoop++) {
                if (strStartsWith === arrAttrs[intLoop].name.substring(0, strStartsWith.length) ) { arrAttrsToDelete.push(arrAttrs[intLoop].name); }
            }
      
            $.each(arrAttrsToDelete, function(index, strName) {
            oTarget.removeAttr(strName);
            });
    };

     

  8. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 04 May 2015 Link to this post

    Someone can help us out with this?
    Please...

  9. Ianko
    Admin
    Ianko avatar
    1589 posts

    Posted 07 May 2015 Link to this post

    Hi,

    Issue 1: Logged as a bug report, you can track it via this feedback portal item—http://feedback.telerik.com/Project/108/Feedback/Details/157876. I updated your Telerik points for the report.

    Issue 2 and 3: Note reproducible locally. The described behavior might be related to the configuration used, and especially the ContentFilters configuration. I suggest trying to isolate this in a simple, locally runnable solution, so to be properly examined.

    Issue 4: The problem is fixed with the current release, as you have mentioned. Simple fix is not available as the resolution involves an entire redesign of the find-and-replace logic.

    On a side note, using the official support system to open tickets will assure you that you will get a response withing 24 hours.

    Regards,
    Ianko
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 12 May 2015 Link to this post

    The reason why i don't want to use the support tickets is simply because no one can see the solution. Every issue with your Telerik controls, i will search in this forums and in the most cases i find a solution.

    I have succesfully reproduced the issue with JQUERY attribute in the BODY tag. It's caused by using editor in a page with the following meta tag in the header (it's a old solution because of bugs in IE8 & IE9, have removed it):

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    I will try to create cases to reproduce other crazy HTML codes. 

  11. Ianko
    Admin
    Ianko avatar
    1589 posts

    Posted 14 May 2015 Link to this post

    Hi,

    Yes, jQuery adds some attributes to the body in order to fix issues with event handling matters in old browser. This is a feature of jQuery and cannot be prevented, moreover it actually provides cross-browser functionality.

    However, using IE7 engine to render HTML in a modern browser is not so recommended. I suggest considering using the default browser engine. When it comes to bugs in IE8 and 9, if they are valid bugs for the most recent version of RadEditor, I suggest reporting them, so that they can be further examined and eventually fixed.

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. EM-Software
    EM-Software avatar
    75 posts
    Member since:
    Feb 2010

    Posted 18 May 2015 Link to this post

    Ok, clear...

    We had used the IE7 engine so long time ago with very old version of the editor. The editor were updated multiple times without removing the meta tag, we didn't had problems with it until the current version. It's removed yet!

    Still didn't found a solid case to reproduce other strange HTML codes, to be continued...

  13. Brian Garson
    Brian Garson avatar
    54 posts
    Member since:
    Jan 2008

    Posted 19 Aug 2015 in reply to EM-Software Link to this post

    For issue 2 (toggling from html to design view, computedstyles error) do you have editor.setFocus() being called anywhere in your Javascript?  

     I had to remove the X-UA-Compatible "IE=10" or "IE=edge" meta filter that I was setting dynamically from code behind, once that was removed I was still having issues.  However I was able to get rid of the error after a ton of trial and error, stripping out lines of code and narrowing it down to ​the fact that I was calling editor.setFocus() onClientLoad to set the focus in the editor, removing this line of code fixed the issue.   Placing the same call in $(document).ready( )  re-introduced the issue:

    1.$(document).ready(function () {
    2.           setTimeout(function() {
    3.              var editor = $find("<%=MyEditor.ClientID%>");
    4.              editor.setFocus();
    5.           }, 200);
    6.       });

    When I removed the editor.setFocus() I noticed the issue was still occuring WTF!!!?  So I commented out the var editor = $find("<%=MyEditor.ClientID%>"); as well, and the issue is no longer happening.   Note I can load the page just fine, it's just toggling from HTML view back to Design view.. even with basic HTML like the following:

    1.<html>
    2.    <head>
    3.        <title>well nuts</title>
    4.    </head>
    5.    <body>
    6.        nothing in here
    7.    </body>
    8.</html>

     

    I've removed all content filters, all client side javascript functions, and the only thing that I can remove that will ultimately fix it is the editor.setFocus() function, and calls to find the Editor in document.ready(), which works once on page load, but not again (depending on the HTML entered) into the HTML view.

     I know this probably doesn't help that much, but it's been a frustrating time trying to sort out what does and doesn't work and why basic HTML will throw an exception in the Telerik Editor.  I'm running 2014.3.1024.35 

     I should also note that our Editor retains the HTML, Head and Body tags, our previous use for the past couple of years has been to strip those out, and we never had the issue.

  14. Brian Garson
    Brian Garson avatar
    54 posts
    Member since:
    Jan 2008

    Posted 19 Aug 2015 in reply to Brian Garson Link to this post

    I stand corrected, I'm able to get the page running 50% of the time, the other 50% I still get the exception even with basic html.

    using the following html:

    1.<html>
    2.<head>
    3.<title>this sucks</title>
    4.</head>
    5.<body>
    6.test
    7.</body>
    8.</html>
    ​ 

    I'm convinced this is a Telerik issue with handling the HTML contents of the editor.  If I dig into the ScriptResource.axd files I've narrowed it down to this bit of code in getComputedStyle.

    • variable d is the #document which is the HTML of the editor
    • document.defaultView is the full HTML contents of the page that the editor is rendered on.
    • document.defaultView does not contain a node with the contents of variable d
    • this throws the exception
    • see attached file "dontWork1.png and dontWork2.png"

     

    When the code executes and works using the exact same HTML passed in to the editor

    • variable d does not include the HTML tags, but instead starts at the "body" tag... and this works no problem.
    • see attached file "works.png"

     

     

  15. Brian Garson
    Brian Garson avatar
    54 posts
    Member since:
    Jan 2008

    Posted 19 Aug 2015 in reply to Brian Garson Link to this post

    The following project will reproduce the issue.

    Run in chrome

    switch to html view

    paste the HTML shared below

    observe the exception

     

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
    <head>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="radscriptmanager1"></telerik:RadScriptManager>
      
      
            <telerik:RadEditor Skin="Metro" ID="HTMLEditor"
                EditModes="Design,Html"
                OnClientLoad="OnClientLoad"
                Height="500px" Width="500px"
                runat="server" EnableResize="true"
                ContentFilters="ConvertToXhtml,IECleanAnchors,ConvertCharactersToEntities,FixEnclosingP,FixUlBoldItalic,IndentHTMLContent,MozEmStrong,RemoveScripts">
            </telerik:RadEditor>
      
            <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
                <script language="javascript" type="text/javascript">
                    function OnClientLoad(editor) {
                        //editor.get_dialogOpener().get_container().set_skin("Web20");
                        setTimeout(function() {
                            editor.setFocus();
                        }, 200);
                    }
                      
                </script>
            </telerik:RadScriptBlock>
      
      
      
        </form>
    </body>
    </html>

    with the following HTML in Chrome

    <html>
    <head>
    <title>this sucks</title>
    </head>
    <body>
    test
    </body>
    </html>

  16. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 20 Aug 2015 Link to this post

    Hello Brian,

    I have made a test with the latest internal build - 2015_3_819 and the issue is not reproducible any more there. I would suggest that you wait for the upcoming official Q2 2015 SP2 release, scheduled for the end of next week.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Bill
    Bill avatar
    10 posts
    Member since:
    Jul 2013

    Posted 23 Jan in reply to EM-Software Link to this post

    Did you ever find out what was causing this problem?  We've been seeing infrequently, but regularly, it for at least 3 years.  We're already using a script to filter crazy html, but it would be really nice to know where this block of code is coming from.

    Thanks,
    Bill

    EM-Software said:

    More crazy codes found:
    <div unselectable="on" class="rrHandle rrNE" style="position: absolute; cursor: ne-resize; z-index: auto; height: 7px; width: 7px; top: 1537.49999976158px; left: 1084.49999976158px;"></div>

  18. Ianko
    Admin
    Ianko avatar
    1589 posts

    Posted 24 Jan Link to this post

    Hello Bill,

    The .rrHandle element (or similar to this one) are rendered by RadEditor when Image and Table resizing is initialized.  Basically, in Chrome, when user selects an image or table and the resize handles render on the page. 

    RadEditor has built-in filters to strip out such HTML elements. If these filters are disabled, such HTML could appear in the output. You can check if there is anything configured about Content Filers and remove it to test if that makes difference.

    Also, this could be caused by copy and pasting tables or images while being resized. However, currently, we are not aware what are the exact steps that leads to that behavior. Therefore, it would be helpful if you can shed some more light on the case and the exact steps to reproduce that so that we can investigate the described behavior. 

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  19. Bill
    Bill avatar
    10 posts
    Member since:
    Jul 2013

    Posted 25 Jan in reply to Ianko Link to this post

    Hello,

    We just figured out how to reproduce the rrHandle problem very reliably:

    In the editor, use the table creation tool to create a table with several rows and columns.
    Use the resizing handles to widen the table.
    Click the Undo button.

    Now check the html.

    Another problem with tables:

    Create a table as above but put a text character in each cell.
    Select the table and copy the table (control-c).
    Click a new line and then control v.

    I get this div wrapping the table:

    <div id="radePasteHelper" style="position: absolute; left: -10000px; border: 0px solid red; top: 0px; width: 1px; height: 1px; overflow: hidden;">

    We are using a fairly old version of the Telerik libraries, so maybe these are both fixed now....

    Thanks,
    Bill

  20. Bill
    Bill avatar
    10 posts
    Member since:
    Jul 2013

    Posted 25 Jan in reply to Bill Link to this post

    You have to click the Undo button twice.  The first time, the resize handles appear, the second time undoes the resize and dumps this into the html:

    <div unselectable="on" class="rrHandle rrSW" style="position: absolute; cursor: sw-resize; z-index: auto; height: 7px; width: 7px; top: 422.5px; left: -0.5px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrS" style="position: absolute; cursor: s-resize; z-index: auto; height: 7px; width: 7px; top: 422.5px; left: 23px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrSE" style="position: absolute; cursor: se-resize; z-index: auto; height: 7px; width: 7px; top: 422.5px; left: 46.5px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrE" style="position: absolute; cursor: e-resize; z-index: auto; height: 7px; width: 7px; top: 387px; left: 46.5px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrNE" style="position: absolute; cursor: ne-resize; z-index: auto; height: 7px; width: 7px; top: 351.5px; left: 46.5px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrN" style="position: absolute; cursor: n-resize; z-index: auto; height: 7px; width: 7px; top: 351.5px; left: 23px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrNW" style="position: absolute; cursor: nw-resize; z-index: auto; height: 7px; width: 7px; top: 351.5px; left: -0.5px;">&nbsp;</div><br><div unselectable="on" class="rrHandle rrW" style="position: absolute; cursor: w-resize; z-index: auto; height: 7px; width: 7px; top: 387px; left: -0.5px;">&nbsp;</div><br><br />
  21. Ianko
    Admin
    Ianko avatar
    1589 posts

    Posted 26 Jan Link to this post

    Hello Bill,

    To test whether the experienced behavior is fixed I suggest you testing the online demo too: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

    If the same is not reproducible, then, most probably these are fixed. Therefore, the best way to  handle that is by upgrading.

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top