Using TinyMCE in ASP.NET Core - File Manager Support

09 September 2017

When ASP.NET Core was released back in June 2016, we could not find a file manager for the TinyMCE web editing tool which we use in all our Content Management Systems (even as of January 2018 we cannot find one). We normally use the excellent Roxy Fileman file manager which supports ASP.NET but not ASP.NET Core. This was a big stumbling block for us, and probably many other developers wishing to use ASP.NET Core, as the majority of web applications these days will require integrated content management, and TinyMCE is one of the best tools at our disposal.

After examining the Roxy Fileman code we realised it would be reasonably straightforward to recode the ASP.NET code they provide into ASP.NET Core, maintaining the vast majority of functionality. We are providing this code here to other developers in the hope that it saves you the need to do the same thing. We must note that as ASP.NET Core does not yet provide a release version of the System.Drawing library we have not implemented any code that processes images, such as resizing, thumbnail generation or image dimension extraction.

Amending Roxy Fileman to support ASP.NET Core

Downloading Roxy Fileman for .NET reveals that the folder structure contain an HTTP Handler in a file named main.ashx within the asp_net folder. File manager calls to this handler are defined in the conf.json file; by amending these two files we were able to implement a .NET Core version as our own API (essentially a REST web service accessible to "Authorized" users via the URL /api/RoxyFileman/[Action]). We stuck to the original structure of the code from Roxy as much as possible.

Integrating Roxy Fileman into your ASP.NET Core project

We have created a stripped-back ASP.NET Core project showing how to implement RoxyFileman as a standalone page; please download this before proceeding. The process is quite straightforward:

  1. Create a folder in your project to hold uploaded CMS content, we are using /wwwroot/CMS/Content in this example; you will also need to create a folder for temp files, we are using /wwwroot/CMS/Temp. In a production environment, the /wwwroot/CMS folder will need to have full permissions for the Windows User associated with your AppPool (it is usually acceptable to assign "Full Control" permissions for the IIS_IUSRS group).
  2. Roxy Fileman uses session variables to store its settings; if you do not have Sessions enabled in your project please amend your Startup.cs file as follows:
    1. Add the following two lines to your ConfigureServices method:
      services.AddSession();
      services.AddDistributedMemoryCache();
    2. Add app.UseSession(); to your Configure method.
  3. Download Roxy Fileman for .NET and extract to a folder named fileman within the /wwwroot/lib folder of your project; delete the asp_net, aspnet_client, tmp and Uploads folders.
  4. Replace the /wwwroot/lib/fileman/conf.json file with the one in our example project.
  5. Copy Controllers/RoxyFilemanController.cs from our example project to your project.
  6. Amend the RoxyFilemanController initializer method in Controllers/RoxyFilemanController.cs to specify the folder paths for your project; we usually pass in a settings object using Dependency Injection which defines the folder paths, but in our example project we have hard-coded this into the initializer for simplicity. We strongly recommend that you enable the [Authorize] attribute on the RoxyFilemanController class (we have commented this only for demo simplicity) to ensure that only logged-in users can access this class (otherwise anybody who discovers the API/RoxyFileman URL will be able to upload files to your site - a huge security risk). 
  7. Add a page to test your installation, we have created a simple Index.html page within the wwwroot folder that contains an IFRAME to load Roxy Fileman with the appropriate configuration.

Integrating Roxy Fileman with TinyMCE

Please see the installation instructions on the Roxy Fileman site for implementing with TinyMCE or CKeditor.


You can download the entire our source code for example project here.