CKEditor 5 integrations for JavaScript frameworks (React, Angular 2+, Vue.js, ??)

[Reinmar]

Soon (in May 2018, in fact) we'll be starting to work on integrations for the most popular JS frameworks. Most likely, we'll be working on them one by one and we'll start from React.

We don't know yet any more details, but I wanted to create this ticket so we can start gathering feedback... and so I can link to somewhere from the upcoming blog post ;).

TODO:

• React integration (ticket: React integration #1015) – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html ✅
• Angular integration (ticket: CKEditor 5 integration for Angular 2+ #1020) – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html ✅
• Vue.js integration (ticket: Implement the first version of this component ckeditor5-vue#1) – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html ✅
• What should we work on next? (you can propose a framework in a comment or 👍 an existing comment)

[Reinmar]

Two related tickets (most likely, to be closed when we'll roll out the integrations):

• [Docs] Example integration with React, Angular 1/2+, Vue, Ember #599 – [Docs] Example integration with React, Angular 1/2+, Vue, Ember
• Angular 2 integration - WYSIWYG Editor #FeatureRequest #347 – Angular 2 integration - WYSIWYG Editor #FeatureRequest

[cavemansspa]

Here's a very simple Mithril / CKEditor integration.

Do you have some ideas on what you'd like to see as framework integration points?

[Reinmar]

Thanks for sharing!

In fact, @szymonkups created some time ago a quick integration with React too: https://jsfiddle.net/szymonkups/43hhtk0j/.

[cavemansspa]

Here's a more comprehensive example.

[pomek]

The first version of React integration has just been published.

Now using npm install @ckeditor/ckeditor5-react will install the package in version 1.0.0-beta.1.

The feedback is welcome.

[ma2ciek]

The first version of Angular integration has just been published too 🎉

Similarly to the React one, run npm install @ckeditor/ckeditor5-angular to install the 1.0.0-beta.1 version.

[mmonirul]

Is there any vue typescript integration?

[ma2ciek]

There's no vue integration at this moment.

If you know well this library you can create an implementation of the integration and share it in the #599 thread. I've found a little bit outdated one there - #599 (comment) - the changesDone event must be replaced with change:data and after that change, the code should work.

[Reinmar]

We're starting work on the Vue.js component very soon. You can track the progress in ckeditor/ckeditor5-vue#1.

[taj]

how about integrating Elm with CKEditor?

[Reinmar]

Interesting. What such integration would need to do? AFAIR Elm is a language which compiles to JS, so I'd guess you can use JS APIs from Elm's level?

[taj]

yes it does compile to Javascript.

The way Elm "comunicates" with normal javscript is through the use of Ports.

It would be nice if CKEditor to already have some ports by default ready for use.
For example to get the return value editor.getData() or to create an editor based on an event managed by Elm.

[Reinmar]

The first version of Vue.js integration was released on npm: https://www.npmjs.com/package/@ckeditor/ckeditor5-vue 🎉 🎉 🎉

You can find the documentation in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

[robclancy]

Just FYI. We have this working in ember fine, but internally. Waiting on word paste before we can completely replace our current editor. Then will see about releasing publically.

[Reinmar]

OK, we've introduced the main 3 integrations and people open separate tickets for othe libs/cmses so we can close this ticket now.

[josegetout]

Just FYI. We have this working in ember fine, but internally. Waiting on word paste before we can completely replace our current editor. Then will see about releasing publically.

Hi! I'm struggling to integrate ckeditor5 with Ember, how did you make it? Any tip for this Ember newbie 🙏

[robclancy]

Published a new version with more details (but still lacking). https://github.com/postedin/ember-ckeditor

[jcmiron-ps]

Any plans for Blazor?

[xinlingfeiwu]

When can there be an official example of integration with Extjs7 ？

[akshay-solutelabs]

Is there any reference for the rails 6 with CKEditor 5?

[xinlingfeiwu]

您好，邮件已经收到，我会尽快给您回复。

[tbreuss]

Here's a more comprehensive example.

Thanks @cavemansspa, your Mithril.js example was very helpful!

[xinlingfeiwu]

您好，邮件已经收到，我会尽快给您回复。

[davidparry]

Flutter for Web would be a big help. Also in our decision to use CKEditor.

[xinlingfeiwu]

您好，邮件已经收到，我会尽快给您回复。