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.

tagHelper
controller.cs
<ejs-richtexteditor id="placeholder" placeholder="Type something">
</ejs-richtexteditor>
<style>
    .e-richtexteditor .rte-placeholder {
        font-family: monospace;
    }
</style>
public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }
    }

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.
tagHelper
controller.cs
<ejs-richtexteditor id="characterCount" showCharCount="true" maxLength="2000">
 <e-content-template>
        <p>
            The RichTextEditor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
        <p><b> Key features:</b></p>
        <ul>
            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
            <li><p> Capable of handling markdown editing.</p></li>
            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
            <li><p> Provides a fully customizable toolbar.</p></li>
            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
            <li><p> Supports third - party library integration.</p></li>
            <li><p> Allows preview of modified content before saving it.</p></li>
            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
            <li><p> Contains undo / redo manager.</p></li>
            <li><p> Creates bulleted and numbered lists.</p></li>
        </ul>
    </e-content-template>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}

Print

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

tagHelper
controller.cs
<ejs-richtexteditor id="print">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
    <e-content-template>
        <p>
            The RichTextEditor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
        <p><b> Key features:</b></p>
        <ul>
            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
            <li><p> Capable of handling markdown editing.</p></li>
            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
            <li><p> Provides a fully customizable toolbar.</p></li>
            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
            <li><p> Supports third - party library integration.</p></li>
            <li><p> Allows preview of modified content before saving it.</p></li>
            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
            <li><p> Contains undo / redo manager.</p></li>
            <li><p> Creates bulleted and numbered lists.</p></li>
        </ul>
    </e-content-template>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.items = new[] { "Print" };
        return View();
    }
}

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.

tagHelper
controller.cs
<div class="control-section">
    <ejs-richtexteditor id="defaultRTE" showCharCount="true" actionComplete="actionCompleteHandler" maxLength="2000" created="created">
        <e-content-template>
            <div> <p>The RichTextEditor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a href='https://ej2.syncfusion.com/aspnetcore/RichTextEditor/Overview'>HTML markup</a> or <a href='https://ej2.syncfusion.com/aspnetcore/RichTextEditor/DefaultMode'>markdown</a> of the content</p>
            <p><b> Toolbar </b></p>
            <ol>
                <li>
                    <p> Toolbar contains commands to align the text, insert link, insert image, insert list, undo / redo operations, HTML view, etc </p>
                </li>
                <li>
                    <p> Toolbar is fully customizable </p>
                </li>
            </ol>
            <p><b> Links </b></p>
            <ol>
                <li>
                    <p> You can insert a hyperlink with its corresponding dialog</p>
                </li>
                <li>
                    <p> Attach a hyperlink to the displayed text. </p>
                </li>
                <li>
                    <p> Customize the quick toolbar based on the hyperlink </p>
                </li>
            </ol>
            <p><b> Image.</b></p>
            <ol>
                <li>
                    <p> Allows you to insert images from an online source as well as the local computer</p>
                </li>
                <li>
                    <p> You can upload an image</p>
                </li>
                <li>
                    <p> Provides an option to customize quick toolbar for an image </p>
                </li>
            </ol>
            <img alt='Logo' src='images/RichTextEditor/RTEImage-Feather.png' style='width: 300px' />
</div>
</e-content-template>
<e-richtexteditor-toolbarsettings items="@ViewBag.tools">
</e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
</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;
}

.sb-header {
    z-index: 100;
}
</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>
public class HomeController : Controller
{
    public ActionResult Index()
    {

        ViewBag.items = new[] { "SourceCode" };
        return View();
    }
}

Full Screen

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

tagHelper
controller.cs
<ejs-richtexteditor id="fullscreen">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
    <e-content-template>
        <p>
            The RichTextEditor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
        <p><b> Key features:</b></p>
        <ul>
            <li><p> Provides &lt; IFRAME &gt; and &lt; DIV &gt; modes </p></li>
            <li><p> Capable of handling markdown editing.</p></li>
            <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>
            <li><p> Provides a fully customizable toolbar.</p></li>
            <li><p> Provides HTML view to edit the source directly for developers.</p></li>
            <li><p> Supports third - party library integration.</p></li>
            <li><p> Allows preview of modified content before saving it.</p></li>
            <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
            <li><p> Contains undo / redo manager.</p></li>
            <li><p> Creates bulleted and numbered lists.</p></li>
        </ul>
    </e-content-template>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.items = new[] { "FullScreen" };
        return View();
    }
}