Using Jodit Editor To Build A WYSIWYG Editor with file upload support in ASP.Net Core

build-wysiwyg-editor-with-file-upload-support-asp-net-core


In this tutorial, I will show you step by step process on how to use Jodit Editor in your ASP.Net Core application including support for file upload.

Jodit Basic Setup

It is pretty straight forward to set up and use Jodit Editor. Just download the latest version.

Include the CSS and javascript like so:


Or Via CDN like so:

Usage

And some textarea element like so:

After this, you can init Jodit plugin.

With this simple setup, fire open your project in browser, you should get a screen like this:

jodit-wysiwyg-editor-basic

However, if you click on the insert image button the only option you have by default if you want to insert image the url field.


Adding Support for File Upload


The following code example illustrates how to handle image upload on your server using .Net Core as a server-side language.

We will create an ActionResult in the HomeController that will be responsible for the file upload like so:

The code is self-explanatory, but the very important part of it is the response format will must always be the way it is so that Jodit will be able to read it on the client-side. We will see this in a moment.

The next thing we have to do is to update the Jodit javascript initialization like so:

With this update, run your project and you should be able to choose a file for upload and display on the editor. See below:

I hope this helps someone. Happy coding!

No comments:

Powered by Blogger.