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

RadEditor toolbar buttons don't work

5 Answers 224 Views
Editor
This is a migrated thread and some comments may be shown as answers.
chairman-mawh
Top achievements
Rank 1
chairman-mawh asked on 23 Aug 2017, 03:18 PM

I've a RadEditor that has some functionality issues in IE. Possibly relevant things:

It's ContentAreaMode = Div

There's only one of them on the page, though it can appear at any location where there is a "reply" button (and there are many of these buttons on the page)

It lives inside a div called FtbPanel

This FtbPanel div programmatically moved into an enclosing placeholderX div, before placeholderX is shown

The javascript that shows the placeholderX does also call .repaint() on the editor, as well as .onParentNodeChanged()

There aren't any serious layout issues with the control

I don't encounter any issues with other RadEditors that are visible when the page loads

The editors that are initially inside a hidden div always have issues with the toolbar buttons - dropdown buttons appear blank/incomplete. CLicking any button causes the page to jump to the top. The button (.e.g bold) doesn't edit the text in any way. Dropdown buttons do not show a menu

Right clicking in the text edit area causes a "Paste menu" (with many different paste options) to appear, but it is stuck to the top of the browser window, just under the address bar

I've tried manually (minutes after the control is shown) tried manually calling .onParentNodeChanged() from the JS console, using $find("id of radeditor").onParentNodeChanged(). The only result of this was to disable the right click menu (that appears stuck to the top of the browser view portal)

The version in use is the latest one, downloaded yesterday. No skin is in use other than the default

-

Any pointers on what might be wrong?

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 24 Aug 2017, 08:47 AM
Hello,

If the problem happens only when the editor is initially hidden, you can place another rendered editor in a hidden part of the page like this:
Copy Code
<div style="position:absolute;top:-10000;left:-10000">
         <telerik:radEditor id="RadEditor1" runat="server" />
</div>

Therefore the resources of all editors hidden and visible will be loaded and when you show the hidden editor the rendering problem should go away.

Regards,
Rumen
Progress Telerik
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.
0
chairman-mawh
Top achievements
Rank 1
answered on 29 Aug 2017, 01:51 PM

Now there's an interesting thing.. I pasted your code into my page, but I accidentally put it inside the same FtbPanel that the other RadEditor (with the functionality problems) is in so it was initially hidden just like the other one is... It doesn't seem to heed the style that moves it offscreen, so it's actually visible right now when I invoked the code to make my other Editor visible.. but even more interestingly, it works just fine - all the toolbar buttons work, it bolds text properly, dropdowns work etc.. It's overly functional of course; ours is much stripped down for use by people who have no idea what a CSS style is, or have no need for HTML validation etc

Here's the markup that places my editor on the page - does anything look obviously wrong to you guys?

<telerik:RadEditor ID="MessageBodyEditor" runat="server" Width="100%" Height="300"
    ToolsFile="RadEditorTools.xml" OnClientCommandExecuting="OnClientCommandExecuting"
    EditModes="Design" DialogsCssFile="/styles/RadEditor/RadEditor_Dialogs_RTL.css"
    ContentAreaCssFile="/styles/RadEditor/EditorContentArea_RTL.css"
    StripFormattingOptions="MSWord" OnClientPasteHtml="OnRadEditorClientPasteHtml"
    ContentFilters="RemoveScripts" EnableViewState="false" ContentAreaMode="Div">
    <CssFiles>
        <telerik:EditorCssFile Value="" />
    </CssFiles>
    <ContextMenus>
        <telerik:EditorContextMenu TagName="IMG" Enabled="true">
            <telerik:EditorTool Name="SetImageProperties" />
        </telerik:EditorContextMenu>
    </ContextMenus>
</telerik:RadEditor>
0
chairman-mawh
Top achievements
Rank 1
answered on 29 Aug 2017, 02:11 PM

I've determined that if I comment out some part of the page load that does setup of the original editor, then it starts working also.. I'll return if I ahve more questions/can localise the part of the code that causes the problem but am unable to ascertain what to do about it. thanks for the help so far Rrmen!

0
Rumen
Telerik team
answered on 01 Sep 2017, 03:03 PM
Hi Matt,

OK, let me know if you have more questions.

Just wanted to add that the CssFiles property does not function when the ContentAreaMode is set to DIV. The div is part of the current page and if you import CSS files through this property it will be applied to all element in it. That's why the property work in iframe mode only because the iframe is another document different from the current page.

Regards,
Rumen
Progress Telerik
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.
0
chairman-mawh
Top achievements
Rank 1
answered on 04 Sep 2017, 09:15 AM

Hi Rumen

Yes, making it in an ContentAreaMode=Iframe means it starts working in firefox. I'll see if I can strip it out to just a single page demo of the problem and post it up... It gives trouble in all versions of the DLL I have (inc latest trial)

Tags
Editor
Asked by
chairman-mawh
Top achievements
Rank 1
Answers by
Rumen
Telerik team
chairman-mawh
Top achievements
Rank 1
Share this question
or