Use TinyMCE html editor in asp.net MVC

Firstly use Nuget to grab the package

Then in your view model define the property that you’d like the TinyMCE editor used for.

[Required(ErrorMessage = "Content is required."), AllowHtml]
public string Content { get; set; }

The really important bit here is the “AllowHtml” attribute, without this you’ll get security errors when you submit the form.

The “required” attribute doesn’t actually work client-side, but I check this server-side with ModelState.IsValid and send back a warning.

On the page where you want to show the editor, make a reference to the TinyMCE javascript

e.g.

 <script src='/scripts/tinymce/tinymce.min.js'></script>

Or reference a bundle.

The last step is to turn the textarea into a TinyMCE editor, using jQuery on page load like this

$(document)
.ready(function() {
bindAjaxPhotoUpload();
tinymce.init({
selector: 'textarea',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help'
],
toolbar:
'insert | undo redo | styleselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});

This turns all textareas into editors, but you can narrow this down if you want

Leave a Reply

Your email address will not be published. Required fields are marked *