Header Ads

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.
The running working solution source 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.

8 comments:

  1. Good tattoos aren't cheap and cheap tattoos aren't good.
    tattoo supply

    ReplyDelete
  2. Amazing Article ! I have bookmarked this article page as i received good information from this. All the best for the upcoming articles. I will be waiting for your new articles. Thank You ! Kindly Visit Us @ Coimbatore Travels | Ooty Travels | Coimbatore Airport Taxi | Coimbatore taxi

    ReplyDelete
  3. TreasureBox is operated by a group of young, passionate, and ambitious people that are working diligently towards the same goal - make your every dollar count, as we believe you deserve something better.
    Check out the best
    tv stand nz
    bike stand nz

    ReplyDelete
  4. ut it's important to understand what you have currently so that you can make the right decision on which mix of Office 365 plans are best suited for your office 365

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. I appreciate your post thanks for sharing the information.
    Gable packaging Georgia
    Cosmetic gift boxes

    ReplyDelete