RichTextBox Example using Free TinyMCE Editor In ASP.Net Core

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.
tinymce demo project
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.

Download TinyMCEDemo Project Here

The current CSharpHelper cannot scaffold literals of type ‘Microsoft.EntityFrameworkCore.Metadata.Internal.DirectConstructorBinding’. Configure your services to use one that can

I am working on a .Net Core 2 application today and tried to apply Add-Migration after I had rollback to an earlier version. Something I’ve done many times with no issues and all the sudden I started seeing this error message below. After researching it for a few minutes, I was able to resolve it pretty quickly. Below are the error message and what was done to rectify it.

Microsoft.EntityFrameworkCore.Migrations[20405]
      No migrations were applied. The database is already up to date.
System.InvalidOperationException: The current CSharpHelper cannot scaffold literals of type 'Microsoft.EntityFrameworkCore.Metadata.Internal.DirectConstructorBinding'. Configure your services to use one that can.
   at Microsoft.EntityFrameworkCore.Design.Internal.CSharpHelper.UnknownLiteral(Object value)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpSnapshotGenerator.GenerateAnnotation(IAnnotation annotation, IndentedStringBuilder stringBuilder)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpSnapshotGenerator.GenerateEntityTypeAnnotations(String builderName, IEntityType entityType, IndentedStringBuilder stringBuilder)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpSnapshotGenerator.GenerateEntityType(String builderName, IEntityType entityType, IndentedStringBuilder stringBuilder)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpSnapshotGenerator.GenerateEntityTypes(String builderName, IReadOnlyList`1 entityTypes, IndentedStringBuilder stringBuilder)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpSnapshotGenerator.Generate(String builderName, IModel model, IndentedStringBuilder stringBuilder)
   at Microsoft.EntityFrameworkCore.Migrations.Design.CSharpMigrationsGenerator.GenerateMetadata(String migrationNamespace, Type contextType, String migrationName, String migrationId, IModel targetModel)
   at Microsoft.EntityFrameworkCore.Migrations.Design.MigrationsScaffolder.ScaffoldMigration(String migrationName, String rootNamespace, String subNamespace)
   at Microsoft.EntityFrameworkCore.Design.Internal.MigrationsOperations.AddMigration(String name, String outputDir, String contextType)
   at Microsoft.EntityFrameworkCore.Design.OperationExecutor.AddMigrationImpl(String name, String outputDir, String contextType)
   at Microsoft.EntityFrameworkCore.Design.OperationExecutor.OperationBase.<>c__DisplayClass3_0`1.b__0()
   at Microsoft.EntityFrameworkCore.Design.OperationExecutor.OperationBase.Execute(Action action)
The current CSharpHelper cannot scaffold literals of type 'Microsoft.EntityFrameworkCore.Metadata.Internal.DirectConstructorBinding'. Configure your services to use one that can.

Below is the solution which I have applied. Simply install this package below

Install-Package Microsoft.EntityFrameworkCore.Design

Once done, I was able to run add-migration with no problem as seen below.

Microsoft.EntityFrameworkCore.Infrastructure[10403]
      Entity Framework Core 2.1.4-rtm-31024 initialized 'ApplicationDbContext' using provider 'Microsoft.EntityFrameworkCore.SqlServer' with options: None
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (0ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT OBJECT_ID(N'__EFMigrationsHistory');
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (1ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT OBJECT_ID(N'__EFMigrationsHistory');
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (0ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT [MigrationId], [ProductVersion]
      FROM [__EFMigrationsHistory]
      ORDER BY [MigrationId];
Microsoft.EntityFrameworkCore.Migrations[20405]
      No migrations were applied. The database is already up to date.
To undo this action, use Remove-Migration.
PM>