ASP.NET MVC5: Rich Text (WYSIWYG) Editor Extended with RTL (Right to Left) text Support

This article is the extension of ASP.NET MVC5: Rich Text (WYSIWYG) Editor article. In this article I shall demonstrate the integration of RTL (Right to Left) text & LTR (Left to Right) text support.

You also need to download the summernote-rtl-plugin extended plugin.

Following are some prerequisites before you proceed further in this tutorial:

1. Knowledge of ASP.NET MVC5: Rich Text (WYSIWYG) Editor.
2. Download summernote-rtl-plugin extended plugin.
3. Knowledge of ASP.NET MVC5
4. Knowledge of HTML.
5. Knowledge of JavaScript. 
6. Knowledge of Bootstrap. 
7. Knowledge of Jquery. 
8. Knowledge of C# Programming.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

Now, let's begin.

1) You need to download the code sample from ASP.NET MVC5: Rich Text (WYSIWYG) Editor article because this article is the extension of that article.

2) Now, open the "Scripts/script-custom-editor.js" file and replace following code in it i.e.

$(document).ready(function ()
{
      // Initialize Editor
    //$('.textarea-editor').wysihtml5();
    $('.textarea-editor').summernote(
    {
        height: 300,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,                  // set focus to editable area after initializing summernote
        toolbar: [
                      ['style', ['style']],
                      ['style', ['bold', 'italic', 'underline', 'clear']],
                      ['fontname', ['fontname']],
                      ['color', ['color']],
                      ['para', ['ul', 'ol', 'paragraph']],
                      ['insert', ['ltr', 'rtl']],
                      ['insert', ['table']],
                      ['insert', ['link', 'picture', 'video', 'hr']],
                      ['view', ['fullscreen', 'codeview', 'help']]
                ]
    });
});

In the above code we have added following line in the default toolbar settings to provide support for RTL (Right to Left) text & LTR (Left to Right) text i.e.

['insert', ['ltr', 'rtl']],

3) Execute the project and you will be able to see following i.e.

Conclusion

In this article you will learn to extend the Summernote Rich Text (WYSIWYG) Editor jquery plugin to provide support for RTL (Right to Left) text & LTR (Left to Right) text by using summernote-rtl-plugin extended plugin.