RadEditor toolbar buttons don't work

6 posts, 0 answers
  1. chairman-mawh
    chairman-mawh avatar
    10 posts
    Member since:
    Jul 2017

    Posted 23 Aug 2017 Link to this post

    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?

  2. Rumen
    Admin
    Rumen avatar
    14107 posts

    Posted 24 Aug 2017 Link to this post

    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.
  3. chairman-mawh
    chairman-mawh avatar
    10 posts
    Member since:
    Jul 2017

    Posted 29 Aug 2017 in reply to Rumen Link to this post

    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>
  4. chairman-mawh
    chairman-mawh avatar
    10 posts
    Member since:
    Jul 2017

    Posted 29 Aug 2017 Link to this post

    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!

  5. Rumen
    Admin
    Rumen avatar
    14107 posts

    Posted 01 Sep 2017 Link to this post

    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.
  6. chairman-mawh
    chairman-mawh avatar
    10 posts
    Member since:
    Jul 2017

    Posted 04 Sep 2017 in reply to Rumen Link to this post

    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)

Back to Top