Telerik RadEditor error while formating big selection

7 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 08 Feb 2018 Link to this post

    Hello.

    If i have a simple table, and i select the table and some other stuff and click BOLD, all element tags get wrapped by a <strong> tag, not only text (for instance tfoot, thead etc are all wrapped with <strong>. Is there any configuration to this ?

    Would apreciate any help.

    Best regards.

  2. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 08 Feb 2018 Link to this post

    Hello Gabriel,

    I tried to repro the problem in the Overview demo but without success. Are you able to reproduce the problem in the live demo and if yes how? If no, please upgrade to the latest version R1 2018 and test again.

    For your convenience I have recorded my test and attached the video.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 08 Feb 2018 Link to this post

    Hi Rumen

    I cannot reproduce the problem in demo, because demo tables do not have <colgroup> tag.

    If i edit editor html and add a <colgroup> before a <thead> it wraps the <colgroup> with the <strong> tag causing the issue.

    Is there a workaround this ? Would overriding isBlockElement function to include colgroup be a good idea ? How would be a good way doing that ?

    Thanks lot for your help.

  4. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 08 Feb 2018 Link to this post

    Hello,

    I was able to replicate the problem and my advice is to select the Table using the X-like select table button on top left of the table instead of using the mouse to prevent the issue or to overwrite the Bold command as shown below:

    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientCommandExecuting(editor, args) {
            if (args.get_commandName() == "Bold") {
                editor.get_document().execCommand("Bold");
                args.set_cancel(true);
            }
        }
    </script>


    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 08 Feb 2018 in reply to Rumen Link to this post

    Disabling the mouse selection is not an option for now.

    Some workaround is

    Telerik.Web.UI.Editor.Utils.isBlockElement = function (element) {
       return this.checkForElement(element, /^(?:body|p|div|h[1-6]|form|colgroup|fieldset|table|thead|tbody|tr|th|td|ul|ol|li|dl|blockquote|address|hr|nav|hgroup)$/i);
    };

     

    Not the best option i guess but it works. If theres an easyer way instead of `setting` the regex for the blocktags, adding a new blocktag, that would be wonderfull.

  6. Gabriel
    Gabriel avatar
    11 posts
    Member since:
    Jan 2018

    Posted 13 Feb 2018 Link to this post

    Hey Rumen, would u know where to Log this as a possible bug ? We have a Telerik License, should i have the company account or could i log this bug in my account ? Best Regards !
  7. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 13 Feb 2018 Link to this post

    Hi there,

    For your convenience I logged the problem in our backlog and bug tracking system. You can subscribe and follow its status at https://feedback.telerik.com/Project/108/Feedback/Details/241966-the-html-of-a-selected-table-gets-ruined-after-applying-bold-formatting-over-it.


    Kind regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 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