Angular 2 integration - WYSIWYG Editor #FeatureRequest

[manuelfink]

I would really appreciate an strong integration of tinymce into modern web application frameworks. I believe both, angular 2 and reactjs are missing strong wysiwyg editor integrations.

Thus I'd really appreciate if you could provide an angular 2 component.

I think the following things would be required:

• Angular Component
• NPM installability
• Webpack integration ( Webpack support #139 ) with full build support for angular cli
• Integrated with Angular 2 and Angular-cli
• Easy updatability of editor while keeping editor settings (Customizeabilty through json array from angular)
• Form and model binding to angular

Maybe its interessting to take a look at the angular 2 repository of froala editor

[Reinmar]

This will be a continuation of #139 (comment).

First of all, thanks for writing down the requirements. Such things are really valuable, because as I've been mentioning earlier, there are so many integration scenarios that it's super hard to think about all of them.

Opinionated I believe the future of web development will be in an reactive component driven way of building web applications.

I agree. We've been looking into that and actually hope that WebComponents land ASAP, cause they'd allow creating a common interface to a product like CKEditor which can later be used in many frameworks. But it's still the future...

In the past, we didn't want to invest time in creating official integrations with frameworks cause they were so many of them and changing that frequently that it'd be a hell to maintain them (and there's nothing worse for project's reputation than dropped support). So it's easier if community steps in, because then everything happens "organically" and it worked back then. The only disadvantage is that the solutions aren't usually perfect and are spread around the web, so it's tricky to find the best one.

In case of CKEditor 5, we'll again have to answer this question – do we want to invest in an integration projects. In the worst scenario, I guess the approach can be that we bootstrap them and leave to the community. But there's a chance that we'll invest more, we'll see :). And Angular 2 and React are definitely first two to work on.

Other requirements

NPM installability

Done. CKEditor 5 is npm based. Though, the development version of CKEditor requires a compilation step, cause the code must be gathered from all those repositories and there are some processing steps like localizing, SASS compilation, SVG compilation, etc.

We also plan to release on npm compiled (don't confuse with bundled) versions of CKEditor 5 and provide Webpack integration. More about this in my previous comment and this thread: #345.

Easy updatability of editor while keeping editor settings (Customizeabilty through json array from angular)

Could you elaborate? I'm not sure what you mean.

[Reinmar]

I would really appreciate an strong integration of tinymce into modern web application frameworks. I believe both, angular 2 and reactjs are missing strong wysiwyg editor integrations.

BTW, I guess you might've reported this ticket in a wrong repository :P But it's valid here as well ;)

[figuerres]

Hey just a note here, hope this is a good place for it.

NPM install and Web pack support go a HUGE part of the way to the angular and angular cli world.
for the rest another huge help will be type definitions for typescript users, or move the project to typescript as that will always generate good java script from the type script.

[Reinmar]

Thanks for the feedback.

NPM install and Web pack support go a HUGE part of the way to the angular and angular cli world.

All CKEditor source packages and ready-to-use builds are published on npm.

Also, we fully support Webpack – we actually use it for the development and preparing builds (see #139). At the same time, we try to stay as bundler-agnostic as possible. In the past, we were able to build CKEditor using Rollup too and it should be still possible.

for the rest another huge help will be type definitions for typescript users, or move the project to typescript as that will always generate good java script from the type script.

We maintain a very thorough API documentation (JSDoc-based notation) so it should not be hard to generate type definitions and maintain them in https://github.com/DefinitelyTyped/DefinitelyTyped.

I hope that this makes us Angular-ready :).

[LaurenceMommers]

I tried using ckeditor5 from source in an angular application (using angular/cli), and everything builds fine except svgs are not included due to the missing webpack configuration (the angular/cli project won't give access to the webpack integration because they consider it an implementation detail)

so the current way of requiring svg files will probably not work in combination with angular/cli.
also see my issue here: angular/angular-cli#7346

( The ready-to-use builds work fine, but they don't allow you to include custom addons ( unless you create your own ready-to-use build outside of the angular/cli project ))

[Reinmar]

so the current way of requiring svg files will probably not work in combination with angular/cli.

That's a pity :(. We followed the Webpack way here to not reinvent the wheel (we had custom compilation pipeline in the past and it caused a lot of issues) so it's sad for me to hear that it's incompatible with some environments. But I also understand the angular-cli team's point of view.

( The ready-to-use builds work fine, but they don't allow you to include custom addons ( unless you create your own ready-to-use build outside of the angular/cli project ))

I think that creating your own ready-to-use build outside angular/cli project may be the easiest solution if you don't need to make some very deep integration with CKEditor and your Angular app. If you do need a deep integration, then I'm afraid you'd need to drop angular/cli.

We'll keep this problem in mind because it may still turn out that we'll change something in how the SVGs are included. But I feel that if you don't have an access to Webpack's configuration, then any solution that we'll find will render similar issues.

[figuerres]

I am just making a guess here but I suspect that that if the editor had an angular component made for it that then the angular cli build could see the dependency and do the web packing needed.

and this would not mean re-doing all the editor code just a making of a package that hooks into how angular works ....
i might be wrong on this but .... possibly ask the cli team what they say about how they see it.

[Reinmar]

Did anyone experience a problem with building for production using Angular CLI? Namely – with minifying the code? There seems to be some problem with Uglify failing to minify CKEditor 5's code (which is not a surprise since Uglify still doesn't support ES6+). I find this very odd that Angular CLI pushes ES6+ code to Uglify. Shouldn't it be transpiling it to ES5 before that?

[artaommahe]

Shouldn't it be transpiling it to ES5 before that?

angular-cli (and also most of angular handmaded pipleines) does not use babel at all and does not expect plain es6 code from any source. Typescript app source code is compiled with some of ts compilators and es5 build is expecting from any imported thirdparty lib. I've never seen babel (or any other es6 transpilers) usage for angular apps.
Also most of typescript projects don't use *.js files transpiling cause they need to transpile only *.ts sources.
I think there is an issue with assumption that if ckeditor built only for es6-supported browsers than any project that uses it will produces es6 code or uses es6-specific pipeline.

[Reinmar]

Thanks for the clarification, @artaommahe. This helps a lot.

Still, this is surprising. @mswilson4040 opened a ticket on Angular CLI's issue tracker – angular/angular-cli#7709. And we'll reconsider bringing back ES5 builds – https://github.com/ckeditor/ckeditor5-build-classic/issues/24. However, before we'll do anything, I'd like to see if there are any other options because ES5 builds are a lot more expensive in terms of code size.

[Reinmar]

Turns out that the next version of Angular CLI will fully support ES6 targets (and source)
– angular/angular-cli#7709 (comment).

Still, we need to properly research how the main/module/es2015 fields of package.json are supported because perhaps there's a way for us to ship ES6 for those envs which support it and ES5 for those which don't (in a way that ES6 version has precedence).

[figuerres]

Honestly, more up front work but, use typescript, then it can transpile to the target runtime , one source one build.

[Reinmar]

Do you mean rewriting CKEditor in TS?

That's not possible. Not today. If we were starting CKEditor 5 implementation today then we would consider using TS. However, TBH, we saw the rise and fall of so many projects in the history of CKEditor 3-5 that we're very cautious when relying on any technology or library. If we were to choose the most popular UI framework at the moment when CKEditor 5 was bootstrapped, today we'd be using Backbone.

[figuerres]

i understand , and not to drag this on too far just a comment:

the Typescript compiler outputs JavaScript - so if typescript was to go away all that you would have to do is trans-pile your typescript to JavaScript and go from there.

it's not a "lock in" that traps the code.

the only two negatives are the current code getting "upgraded" to Typescript and the possibility of the end case of no new typescript.

the advantages include but are not limited to the ability to generate multiple versions of JavaScript for the different versions browsers support from one code base.

also typescript != UI

[fredck]

the advantages include but are not limited to the ability to generate multiple versions of JavaScript for the different versions browsers support from one code base.

Just to not leave this unsaid, you can do the same with ES6+Babel, with the advantage that you can run the original ES6 code in browsers that support it without transpilation (most of the modern browsers). So, at the end of the day, ES6 vs TypeScript is just a matter of taste ;)

[Reinmar]

I reported a separate ticket for documentation about integrating CKEditor with Angular and React – #599.

[Braste]

So is there anything going on with a documentation for this? I mean, anything else than a "VERY primitive Angular2+ example" in the other ticket? Something for people, who don't use webpack or jis? Like an AOT or rollup documentation for Angular 5? Or at least a hint, that at the moment ckeditor5 isn't compatible with Angular 5, because nobody knows, how to implement it properly?

[figuerres]

for me i will stay with V4 for now, if and when V5 gets to where i can use it i will.
last tests i was able to get v4 working very easy. V5 was too many parts in a box with no help.

[Braste]

Unfortunately most of the existing Angular 4/5 implementations of version 4 don't work with rollup, too, "'CKEditorModule' is not exported by..." all the time.

[figuerres]

i use angular cli , works for me that way.

[marc-wilson]

I'm using CKEditor with Angular 5 without issue. Here is an example (I think this repo is Angular 4, but it shouldn't be any different) https://github.com/mswilson4040/ckangular

[Reinmar]

We started work on an Angular component for CKEditor 5 in #1020. We've got some doubts on how to propose this component in the most flexible way. We'll be grateful for all the feedback.

I'll close this ticket as we're on npm already, we're buildable by webpack and all the other points (Angular component and compatibility with angular-cli) will be handled in #1020.

[ma2ciek]

If somebody is still interested in that integration, we've released a beta version already - https://www.npmjs.com/package/@ckeditor/ckeditor5-angular. If you encounter a problem or have an idea, please, report it in the https://github.com/ckeditor/ckeditor5-angular :)