Search results

Miscellaneous

Placeholder

Specifies the placeholder for the RichTextEditor’s content used when the RichTextEditor body is empty through the placeholder property.

Through the rte-placeholder class we can able to define our custom font family, font color and styles to the placeholder text.

.e-richtexteditor .rte-placeholder {
    font-family: monospace;
}

The below sample demonstrates the placeholder option in RichTextEditor.

razor
@Html.EJS().RichTextEditor("default").ShowCharCount(true).MaxLength(2000).Value((string)ViewBag.value).Render()
<style>
    .e-richtexteditor .rte-placeholder {
        font-family: monospace;
    }
</style>

Character count

The RichTextEditor automatically counts the number of characters in the content area while typing using showCharCount property. The characters count displayed at the bottom right of the editor. Limit the number of character in the RichTextEditor’s content using maxLength property. By default, the editor sets the characters limit value is infinity.

The character count color will be modified based on the characters in the RichTextEditor.

Status Description
normal Till 70% of given maxLength count reach, character count color is black.
warning Once the number of character count in the RichTextEditor reached 70% of given maxLength count, the character count color will be orange, indicating that, the RichTextEditor value going to reach the maximum count.
error Once the number of character count in the RichTextEditor reached 90% of given maxLength count, the character count color will be red, indicating that, the RichTextEditor value reached the maximum count.
razor
@Html.EJS().RichTextEditor("default").ShowCharCount(true).MaxLength(2000).Value((string)ViewBag.value).Render()
<style>
    .e-richtexteditor .rte-placeholder {
        font-family: monospace;
    }
</style>

Print

The editor provides print tools which use to print the contents of the editor.

razor
@Html.EJS().RichTextEditor("default").Value((string)ViewBag.value).ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()

Code view

RichTextEditor includes the ability for users to directly edit HTML code via Source View in the text area. If you made any modification in Source view directly, the changes will be reflected in the RichTextEditor’s content. So, the users will have more flexibility over the content they have created.

This sample used Code mirror plugin helps to highlight the HTML content and when changes happens in code view, the same has been reflected in preview mode.

razor
<div class="control-section">
    @Html.EJS().RichTextEditor("default").ToolbarSettings(e=>e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).ShowCharCount(true).MaxLength(2000).Created("created").ActionComplete("actionCompleteHandler").Render()
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>

<style>
    .e-code-mirror::before {
        content: '\e345';
    }

    .e-html-preview::before {
        content: '\e350';
    }

    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }
</style>

<script type="text/javascript">
    var defaultRTE;
    var divPreview;
    var myCodeMirror;
    var textArea
    divPreview = document.getElementById('DIV_Preview');
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();

    }
    function mirrorConversion(e) {
        var id = defaultRTE.getID() + 'mirror-view';
        var mirrorView = defaultRTE.element.querySelector('#' + id);
        var charCount = defaultRTE.element.querySelector('.e-rte-character-count');
        if (e.targetItem === 'Preview') {
            textArea.style.display = 'block';
            mirrorView.style.display = 'none';
            textArea.innerHTML = myCodeMirror.getValue();
            charCount.style.display = 'block';
        }
        else {
            if (!mirrorView) {
                mirrorView = ej.base.createElement('div', { className: 'e-content' });
                mirrorView.id = id;
                textArea.parentNode.appendChild(mirrorView);
            }
            else {
                mirrorView.innerHTML = '';
            }
            textArea.style.display = 'none';
            mirrorView.style.display = 'block';
            renderCodeMirror(mirrorView, defaultRTE.value);
            charCount.style.display = 'none';
        }
    }
    function renderCodeMirror(mirrorView, content) {
        myCodeMirror = CodeMirror(mirrorView, {
            value: content,
            lineNumbers: true,
            mode: 'text/html',
            lineWrapping: true,
        });
    }
    function actionCompleteHandler(e) {
        if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
            this.sourceCodeModule.getPanel().style.display = 'none';
            mirrorConversion(e);
        }
        else {
            setTimeout(function () { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);
        }
    }
</script>

Full screen

Stretches the editor to the maximum width and height of the browser window through the FullScreen tool in the toolbar.

razor
@Html.EJS().RichTextEditor("default").Value((string)ViewBag.value).ToolbarSettings(e => e.Items((object)ViewBag.items)).Render()