Ckeditor5: 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:

• [x] React integration (ticket: https://github.com/ckeditor/ckeditor5/issues/1015) – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html ✅
• [x] Angular integration (ticket: https://github.com/ckeditor/ckeditor5/issues/1020) – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html ✅
• [x] Vue.js integration (ticket: https://github.com/ckeditor/ckeditor5-vue/issues/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):

• https://github.com/ckeditor/ckeditor5/issues/599 – [Docs] Example integration with React, Angular 1/2+, Vue, Ember
• https://github.com/ckeditor/ckeditor5/issues/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 https://github.com/ckeditor/ckeditor5/issues/599 thread. I've found a little bit outdated one there - https://github.com/ckeditor/ckeditor5/issues/599#issuecomment-345202341 - 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 https://github.com/ckeditor/ckeditor5-vue/issues/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.

[sauravraj95]

it will be great if we get the access to the text area so that we can dynamically paste some emoji or any icon while copying it to clip board thing in angular. Or simple have some features like this.

[Reinmar]

@sauravraj95, please report a separate issue for this in https://github.com/ckeditor/ckeditor5-angular.

[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 :pray:

[robclancy]

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