RADEditor issues - cursor jumps to bottom of editor window then comes back up

[Arnelio]

We are encountering an issue with the RADEditor when editing a page in SharePoint. In Edit mode, there is a very small area on the left & right side of the eidtor window wherein when you click on it, the cursor jumps to the bottom of the editor window then goes back up to (or near) the area where the mouse was clicked. This is very inconvenient for users specially when trying to highlight a paragraph since what will happen is the cursor will jump somewhere at the bottom and will highlight that area instead. I've read this forum and found not exactly the same issue (but somewhat similar - i.e. cursor jumps to top of page when mouse hovers outside the editor window or when pressing enter). Does anyone know how to fix this? Any information is greatly appreciated.

I have attached a picture to illustrate what I mean.

NOTE: I added the borders just to emphasize where exactly the jumping occurs (when mouse is click on that area outside of the border).

[Ianko]

Hello Arnelio,

The described behavior is not something that is commonly encountered. Therefore, it would be better if you could isolate more the case, so to be reproducible locally outside SharePoint. RadEditor Web Part is not so different from RadEditor control, the major part is that it is set to Div Content Area mode by default.

You can test and try to isolate the scenario using this online demo—http://demos.telerik.com/aspnet-ajax/editor/examples/contentareamodediv/defaultcs.aspx. Although, no matter how I have tested, I was unable to recreate the described behavior.

Regards,
Ianko
Telerik

 

 

[Arnelio]

Hello Ianko,

 Thank you very much for your quick reply. Much appreciated. Actually from the link you provided, it states there that the default Content Area mode of RADEditor is DIV (please see below):

ContentAreaMode - This property specifies if the content area element of RadEditor is editable IFRAME or DIV. There are two values available for the property: "Iframe" and "Div". The default value is "Iframe". 

In any case, I found out what's causing the extra space on the left & right side of the content area but not sure what exactly is causing it. An extra padding of 0.5px is being added and when you click on that area, that's where the jump occurs. I was able to override this with CSS removing the padding but I have to add the code in the HTML source. 

 I still prefer to use the IFRAME but it seems it is calling a built-in CSS file but can't find it. Can you please help me locate this CSS file?

[Arnelio]

Hi Ianko,

 From my previous reply, I meant the DEFAULT ContentArea mode is "iFrame" not "DIV" (which is found on the link you provided).

Cheers,

Arnelio

[Marin Bratanov]

Hello Arnelio,

The default value is Iframe, but for SharePoint, it is DIV, because of the specifics in the environment.

As for the presence of the borders and how to override their CSS - since I do not know what the exact problem is, my best advice is to use the browser dev toolbar to examine the HTML element and its classes in order to prepare a sufficient cascade.

Considering the decimal values for pixels do not really make sense, it seems likely that your browser is zoomed and calculates such a value, so resetting it to the default zoom level is very likely to help.

In case you are referring to the default "0 5px" (not "0.5px") padding for the div content area, you can override it like this:

.RadEditor div.reContentArea
{
    padding: 0;
}

Regards,

Marin Bratanov
Telerik

 

 

[Arnelio]

Hi Marin,

 Thanks Marin for the prompt reply, much appreciated. I did figure out what's causing the issue via IE Dev Toolbar. You are right in pointing out the 0.5 px padding. I was able to override this by embedding my own CSS inside the HTML source of the RAD Editor. The next thing we want is to somehow not embed the CSS inside the HTML source since users/editors are also able to edit the HTML. They might accidentally delete the CSS or modify it by mistake which will result to the old issue or might cause some other problems. Is there a way to implement the CSS without embedding in the HTML source? Looking forward to your reply.

Cheers,
Arnelio

[Marin Bratanov]

Hello,

I have answered your support ticket on the matter and I am pasting my response here to help anyone else having similar questions.

---

The CSS workaround I have offered should not be placed inside the RadEditor, it should be placed on the page where RadEditor is declared. Thus, end users will not be able to edit/remove it.

In case you do not wish to use stylesheets, you can do this via JavaScript:

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="Div" OnClientLoad="OnClientLoad"></telerik:RadEditor>
<script>
    function OnClientLoad(sender, args) {
        sender.get_contentArea().style.padding = "0px";
    }
</script>

which assumes you can add the OnClientLoad handler. 

Another way to prevent that is to disable the HTML mode of the editor: http://www.telerik.com/help/aspnet-ajax/editor-edit-modes.html. If you are using the built-in RadEditor WebPart, here is how to change this configuration via the config file: http://www.telerik.com/help/aspnet-ajax/moss-sp2010-removing-html-source-option.html (the article is also valid for SP2013, you only need to change the path to \Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\7.x.x.0__1f131a624888eeed\Resources\ConfigFile.xml).

If you want to disable all CSS being added as style attributes to the HTML elements - I am afraid this is impossible. RadEditor can only apply styling as inline styles, because the HTML content is all it has, it cannot rely on external stylesheets.

Regards,

Marin Bratanov
Telerik