In this post, I’d like to take the opportunity to explain briefly how to use the TinyMCE plugin to add Rich TextBox feature to your .Net application. For this specific example I am currently using .Net Core 2.0. Don’t worry if you’re on an earlier .Net version because the implementation is about the same.
First of all, we need a project to be created. I’ll call it TinyMCEDemo which is available on github if you would like to download.
Once the project is created, run it and make sure there’s no issues.
For this project I am adding a new Model object called “Book” and a new controller called BooksController. We’ll use the create view to add the book form.
namespace TinyMCEDemo.Models
{
public class Book
{
public string Title { get; set; }
public string Author { get; set; }
public string Description { get; set; }
}
}
After adding the new books controller, run the project and you should see the following book form as shown below.
Now, to install the plugin the simplest way to do so is to reference the CDN endpoint at this location below by adding it to the layout.cshtml file before the site.js reference file.
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
Next update the site.js file with the following scripts below.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need to do is pass an object that contains a selector to tinymce.init().
In this example, let’s replace all ‘textarea(s)’ with a TinyMCE editor instance by passing the selector ‘textarea’ to tinymce.init() which will enable tinymce to all all textarea in the application.
(function ($) {
"use strict";
$(document).ready(function () {
tinymce.init({
selector: 'textarea'
});
});
})(this.jQuery);
Run the project now and the description should now render the Rich Text format as shown below. If you have any issues please let me know and I’ll try my best to help.
