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.
- Knowledge of ASP.NET MVC5: Rich Text (WYSIWYG) Editor.
- Download summernote-rtl-plugin extended plugin.
- Knowledge of ASP.NET MVC5
- Knowledge of HTML.
- Knowledge of JavaScript.
- Knowledge of Bootstrap.
- Knowledge of jQuery.
- Knowledge of C# Programming.
The running working solution source code is being developed in Microsoft Visual Studio 2015 Enterprise.
Now, let's begin.
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.