Rich Text (WYSIWYG) Editor Extended With RTL (Right To Left) Text Support

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.

Now, let's begin.

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.

Now, open the "Scripts/script-custom-editor.js" file and replace the 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 the following line in the default toolbar settings to provide support for RTL (Right to Left) text & LTR (Left to Right) text.

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

Execute the project and you will be able to see the following.

Conclusion

In this blog, you learned how to extend the Summernote Rich Text (WYSIWYG) Editor jQuery plugin to provide support for RTL (Right to Left) text & LTR (Left to Right) text with the help of summernote-rtl-plugin extended plugin.