Add element above clicked element

8 posts, 0 answers
  1. Alien Interactive AB
    Alien Interactive AB avatar
    23 posts
    Member since:
    Jul 2004

    Posted 27 Sep 2017 Link to this post

    Hi,

    I have created a custom context menu "AddSpaceAboveTable" And applied it the the table menu. 

    Why: In internet explorer there is no way to add something before a table if it is in the begining of the editor, same in the bottom. 

    So when the user right clicks on a menu item I want to add a BR before/after that table. 

    Problem: How do i get the position where I want to paste my fix?

    function command_AddSpaceAboveTable(commandName, editor, args) {
        console.log('command_AddSpaceAboveTable');
     
        var selection = editor.getSelection();
        var theSelectedTable = selection.getParentElement(); // Here is my table.
    }
  2. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 29 Sep 2017 Link to this post

    Hi,

    You can create an element in the content area of RadEditor using this syntax:

    editor.get_document().createElement("br");

    but why do you need to add elements before the table using a custom command of a context menu.

    You can use the editor.pasteHtml("<br>") method to paste it at cursor position.

    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. Alien Interactive AB
    Alien Interactive AB avatar
    23 posts
    Member since:
    Jul 2004

    Posted 03 Oct 2017 Link to this post

    why? Try creating something above or below this table in Internet Explorer in Design view and tell me how you did.

    <table>
        <tbody>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td>
                <p> </p>
                </td>
            </tr>
        </tbody>
    </table>
  4. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 03 Oct 2017 Link to this post

    Hello,

    This is a browser behavior of the underlying rich text editing engine of IE that RadEditor's iframe/div content area uses.

    If the table is inserted by RadEditor via the Insert Table or Table Wizard the editor takes care of the content and add a <br /> tag at the end of the <table> element. 

    In case the editor is empty and this table is pasted from another location, attach to the OnClientPasteHtml event, check for the Paste command and put a <br /> or a &nbsp; before and after the table element.

    If the table is inserted in HTML mode of RadEditor and this is the only element in the editor, write a custom content filter that will add a <br /> or &nbsp; space before and after the table.

    Best 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.
  5. Alien Interactive AB
    Alien Interactive AB avatar
    23 posts
    Member since:
    Jul 2004

    Posted 03 Oct 2017 Link to this post

    Hi,

    I know it is a browser behavior, our customer use IE as default, so we have to fix it somehow..

    I have to asume that the loaded content could look something like my example above. 

    How do I add something above the table, there is no BR inserted there, i guess drag n drop is the easiest way to come around it for IE users?

    Back to basic, this wont work if I cant set the cursor before or efter the table: You can use the editor.pasteHtml("<br>") method to paste it at cursor position.

  6. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 03 Oct 2017 Link to this post

    Hi,

    If the table is the only element in the content, attach to the OnClientLoad client event,  check whether the table is the only element in the content area (editor.get_html(true).startsWith("<table"); and if this is true wrap the table in &nbsp; entities:

    editor.set_html("&nbsp;" + editor.get_html(true) + "&nbsp;");

    Best 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.
  7. Alien Interactive AB
    Alien Interactive AB avatar
    23 posts
    Member since:
    Jul 2004

    Posted 03 Oct 2017 Link to this post

    I actually have a similar solution today, the problem is there is some cases when this is not enough. One example when two tables are direct after each other like </table><table> then I cant add something between them. This i why I need some manual workaround.
  8. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 03 Oct 2017 Link to this post

    Hi,

    In such case, use DOM nodes instead of string. Check how many nodes you have in the content area in a for loop and if they are of type table. You can use this syntax:

    editor.get_document().getElementsByTagName("table")

    .previousSibling and .nextSibling properties will help you to see whether the table element has any siblings.

    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.
Back to Top