Working with Content

8 Jun 20237 minutes to read

The editor creates the iframe element as the content area on control initialization, it is used to display and editing the content. In Content Area, the editor displays only the body tag of a < iframe > document. To set or modify details in the < head > tag, use Source view of the editor.

Iframe Attributes

The editor allows you to passing an additional attributes to body tag of a < iframe > element using iframeAttributes property. The property contains name/value pairs in string format, it is used to override the default appearance of the content area.

NOTE

the content area’s font, color, margins, and background can be overridden using iframeAttributes property. You can specifies the editable behavior (content editable) of the content also in this property.

HTML

<textarea id="rteSample"></textarea>
 
/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
            value: "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," +
            " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
            iframeAttributes:{style: "background-color:#e0ffff;color:#6495ed;"}
        });
    });
}

NOTE

Background image for the RTE control : <p>Link</p>

Set default font for the Iframe : <p>Link</p>

Content Editable

The editor provides option to control the editable behavior using allowEditing property. When the allowEditing property is set to false, the editor disables its editing functionality.

HTML

<textarea id ="rteSample"></textarea>

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
                value: "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," +
                " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
                allowEditing: false
            });

        });
 }

</script>

The contentEditable attribute allows you to make any element of HTML content to become editable or non-editable.

HTML

<textarea id ="editor"></textarea>

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
                value: "<p>The RichTextEditor (RTE) control enables you to edit the contents with insert table and images,</p>" +
                "<p> it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.</p>",
            });

            var editor = $("#editor").ejRTE("instance");
            var iframeDoc = editor.getDocument();
            var paragraph = $("p", iframeDoc.body);
            $($(paragraph)[1]).attr("contenteditable", "false");
        });
   });
}

NOTE

Content editable is fully compatible with latest browsers, to know more details, see here.

Submit Content

The editor allows you to process its content before it is being submitted to the server on form submit event. You can use this option to validate content on the client side to prevent invalid data from being submitted to the server.

This example shows how to encode the HTML content before form submit event.

HTML

<form>
        <textarea id ="rteSample"></textarea>
        <button type ="submit">Submit</button>
    </form>
/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
                value: "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," +
                " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
            });

        $("form").on("submit", function () {
            var editor = $("#editor").data("ejRTE");
            var encoded = $('<div />').text(editor.model.value).html();
            $("#editor").val(encoded);

        });
   });
}

Persistence

The editor is capable to persist its content with HTML format. By default, the persistence support is disabled in the editor. When you set the enablePersistence property to true, the persistence will be enabled in the editor.

NOTE

local storage is not supported below ie9 version, therefore persistence support is fallback to cookie.

HTML

<textarea id="rteSample"></textarea>

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
                enablePersistence: true
            });
        });
  }

Apply Font color and Background color

If you want to apply font color or background color for a selected content of RTE you can use font color and background color tools. These tools contains a color palette with basic colors along with an option called “More colors..” in order to choose custom colors from color picker dialog.You can apply transparent background color for selected text through transparent button available in background color palette.

HTML

<textarea id="rteSample"></textarea>

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
              value: "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images, it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
              tools: {
                font: ["fontName", "fontSize", "fontColor", "backgroundColor"]
            }
        });
     });
}

Insert the content at cursor

If you want to insert/paste the content at the current cursor position (or) to replace the selected content with some formatting, you can use pasteContent method in the editor.

HTML

<textarea id="rteSample"></textarea>

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module RTEComponent {
    $(function () {
        var sample = new ej.RTE($("#rteSample"),{
            value:"The RichTextEditor (RTE) control enables you to edit the contents with insert table and images,"+
            " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
        });
    });
}
    function pasteContent() {
        var selectedHtml = sample.getSelectedHtml();
        sample.pasteContent("<p style ='background-color:yellow;color:skyblue'>" + selectedHtml + "</p>");
    }