Kentico 12 MVC - Upgrade CKEditor to 5

Erick Valdivieso asked on May 20, 2019 23:15

Hello, I am looking for better capabilities of the Table option in the editor, I see that Kentico uses CK-Editor as a base. I believe Kentico is using the version 4 of CK-Editor, but I found that version 5 of CK-Editor has an improved version of the table:
https://ckeditor.com/docs/ckeditor5/latest/features/table.html

I will like to know if it's possible to upgrade the CK Editor that Kentico uses to 5 and please provide instructions on how to upgrade. Thanks

kentico 12 mvc ck editor

Correct Answer

Trevor Fayas answered on May 28, 2019 01:03

Right now Ketnico 12 MVC doesn't have a good Inline editor. CK Editor v5 also has done away with the ability to access the HTML of the element. One of our developers has created a Tiny MCE Inline WYSIWYG editor, we're in the processes of converting it to a Form Component so you can use it both inline and in the widget dialog box, and then we'll be putting it up on the Kentico MVC 12 Boilerplate project. Subscribe to it and you should see the commit, hopefully in a week or two!

If you are referring however to the in-Kentico WYSIWYG editor (normal "Form Control") it can be tricky to upgrade the editor to version 5, doable but tricky. YOu may be better off also creating a TinyMCE implementation of a custom form control for the mother. It would really only be for 1 version though as next Kentico version (fingers crossed) the mother will be in MVC as well and won't be in web forms!

1 votesVote for this answer Unmark Correct answer

Recent Answers

Erick Valdivieso answered on May 28, 2019 16:44

Thanks for your answer, I will wait for that update with the Tiny MCE integrated.

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on May 29, 2019 23:05

Got some free time and we were able to pump this out.

The Kentico Boilerplate now has both an Inline Editor and Form Component for the TinyMCE v5.

I also have a Editable Text and Static Html Widget added so you can edit content both on the page, or through the configuration popup for the widget.

You can grab it at https://github.com/KenticoDevTrev/KenticoBoilerplate_v12

To merge the files in, you need to grab:

Content/FormComponents/TinyMCEInputComponent
Content/InlineEditors/TinyMCEEditor
Controllers/Widgets/EditableTextWidgetController.cs
Controllers/Widgets/StaticHtmlWidgetController.cs
Library/Helpers/HtmlHelperExtensions.cs
Models/FormComponents/TinyMCE
Models/InlineEditors/TinyMCEEditor
Views/FormComponents/_TinyMCEInputComponent.cshtml
Views/InlineEditors/_TinyMCEEditor.cshtml
Views/Widgets/_EditableTextWidget.cshtml
Views/Widgets/_StaticHtmlWidget.cshtml

That should cover all the stuff. Happy coding!

2 votesVote for this answer Mark as a Correct answer

Erick Valdivieso answered on May 30, 2019 15:26

This is great, thanks for keeping me updated. I'll definitely look into integrating this into my project.

0 votesVote for this answer Mark as a Correct answer

Neal Becklén answered on August 15, 2019 10:38

This is great, Trevor. It saved me some time and headache. Do you know if there is any way to integrate "Insert image" with Media libraries?

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on August 15, 2019 14:25

Sadly we haven't gotten the image and link working with Kentico, I'm hopeful Kentico will fork the repo and do that.

Also the tool is now on Nuget and has its own GitHub repo.

0 votesVote for this answer Mark as a Correct answer

Geo Neeliyara answered on November 15, 2019 13:30 (last edited on November 15, 2019 13:32)

Hi,

I tried to integrate Editable Text Widget and Static HTML widget (Followed the below instruction). But i am not seeing any rich text editor controls. Do I miss any steps?

To merge the files in, you need to grab:

Content/FormComponents/TinyMCEInputComponent

Content/InlineEditors/TinyMCEEditor

Controllers/Widgets/EditableTextWidgetController.cs

Controllers/Widgets/StaticHtmlWidgetController.cs

Library/Helpers/HtmlHelperExtensions.cs

Models/FormComponents/TinyMCE

Models/InlineEditors/TinyMCEEditor

Views/FormComponents/_TinyMCEInputComponent.cshtml

Views/InlineEditors/_TinyMCEEditor.cshtml

Views/Widgets/_EditableTextWidget.cshtml

Views/Widgets/_StaticHtmlWidget.cshtml

Regards, Geo

0 votesVote for this answer Mark as a Correct answer

Erick Valdivieso answered on December 12, 2019 21:24 (last edited on December 12, 2019 21:27)

Hi Trevor Fayas, I wanted to say thanks again for the code reference on how to implement this, I actually was able to successfully integrate this back in July and its been working well.

I never did implement the MVC.Net bundling into my project site, because I was using something else at the moment and this week I just enable the MVC.Net bundling on my site. The TinyMCE implementaiton is failing on the administrators end and also causing an error to the compile bundles on the front-end.

I wanted to ask you if you could provide any advise for this issue. Thanks

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on December 12, 2019 22:05

Kentico published their froala wysiwyg editor, but I would wait another week or two since they almost have the customizable editor tools working on it which is needed, I subscribed to their repo so hopefully we will see something soon, and also hopefully it will be in nuget package!

0 votesVote for this answer Mark as a Correct answer

Erick Valdivieso answered on December 12, 2019 23:38

Thanks for the quick response Trevor Fayas, I actually happen to figure out the solution to the issue I was getting. I reference your original Boilerplate and I notice that the order on how the jQuery, jQuery.Validation and jQuery.Unobtrusive was different to how I originally had them, which was based on the DancingGoat order, so I match it to your order and it worked.

That new editor Kentico is working on sounds interesting, please keep me posted when you hear more about it.

0 votesVote for this answer Mark as a Correct answer