contentEditable="false" Internet Explorer and doctype

2 posts, 0 answers
  1. cheeves
    cheeves avatar
    4 posts
    Member since:
    Nov 2006

    Posted 04 Nov 2011 Link to this post

    Hi, 
    I'm trying to make a table non editable in the radeditor in ie8+, below is a sample of the content of the editor.
    When I have a doctype in the content it is possible to edit everything, with out the doctyps it behaves as expected.
    It would be great if you could help me figure out how to get the  there a way to get contentEditable="false" functioning and include the doctype.

    thanks

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
        .unselect{
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            }
        </style>
        </head>
        <body class="A4" id="editorBody" style="background-image: url(/images/rightmargin.png); min-width: 170mm; padding-bottom: 5mm; min-height: 297mm; padding-left: 20mm; width: 170mm; padding-right: 20mm; background-repeat: repeat-y; background-position: 191mm 0mm; height: 100%; padding-top: 5mm;">
            <span contenteditable="false" unselectable="on" class="unselect">
            <table class="EmbeddedTable unselect" style="width: 210mm;" contenteditable="false" unselectable="on" cellpadding="3">
                <colgroup><col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                <col style="text-align: left; width: 30mm; vertical-align: top;" />
                </colgroup>
                <thead  class="unselect" style="font-style: normal; font-family: arial; font-size: 8pt; font-weight: bold; text-decoration: none;">
                    <tr>
                        <td  class="unselect" style="text-align: center; width: 210mm; font-family: arial;" contenteditable="false" colspan="7" unselectable="on">
                        <p class="tableP unselect" style="text-align: center; font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                    </tr>
                    <tr>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect"  style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold; text-decoration: none;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                        <td class="DesignColumnHeader unselect" style="width: 30mm;" contenteditable="false" unselectable="on">
                            <p class="tableP unselect" style="font-weight: bold;" contenteditable="false" unselectable="on">not editable</p>
                        </td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            </span>
        </body>
    </html>
  2. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 09 Nov 2011 Link to this post

    Hi Cheeves,

    The content area of RadEditor is a standard editable iframe and the observed issue is a browser behavior, which is fixed by the browser developers in IE9.

    You can attach to the onclick event of the content area and check whether the selected element has contenteditable=false attribute or some custom id and disable the content area and the toolbar of RadEditor using the following two methods:

    editor.enableEditing(false
    );
    editor.set_editable(false);

    More details are available in the following forum thread:
    Delete Element Prevention.

    All the best,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top