Add element above clicked element

[Alien Interactive AB]

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.
}

[Rumen]

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

[Alien Interactive AB]

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>

[Rumen]

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

[Alien Interactive AB]

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.

[Rumen]

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

[Alien Interactive AB]

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.

[Rumen]

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