This is a migrated thread and some comments may be shown as answers.

Some issues with working in the editor

20 Answers 431 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Erick asked on 21 Apr 2015, 03:21 PM

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

20 Answers, 1 is accepted

answered on 23 Apr 2015, 02:40 PM

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);

});

};

answered on 07 May 2015, 06:04 AM

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.

answered on 14 May 2015, 12:22 PM

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

answered on 19 Aug 2015, 01:02 PM

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.

answered on 19 Aug 2015, 03:14 PM

dontwork1.png

dontwork2.png

works.png

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"

answered on 19 Aug 2015, 04:12 PM

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

answered on 24 Jan 2017, 08:15 AM

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.

answered on 25 Jan 2017, 08:47 PM

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:

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

Thanks,
Bill

answered on 25 Jan 2017, 08:51 PM

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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </div><br><br />