-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Docs] Example integration with React, Angular 1/2+, Vue, Ember #599
Comments
Sounds good! |
Angular1 example using two-way binding with ngModel: import CkEditor from "@ckeditor/ckeditor5-build-classic";
export default class CkEditorDirective {
constructor() {
this.restrict = 'A';
this.require = 'ngModel';
}
static create() {
return new CkEditorDirective();
}
link(scope, elem, attr, ngModel) {
CkEditor.create(elem[0]).then((editor) => {
editor.document.on('changesDone', () => {
scope.$apply(() => {
ngModel.$setViewValue(editor.getData());
});
});
ngModel.$render = () => {
editor.setData(ngModel.$modelValue);
};
scope.$on('$destroy', () => {
editor.destroy();
});
})
}
} Registration: export default angular.module('admin.newsletter', [])
.directive('ckEditor', CkEditorDirective.create) Usage: <textarea ck-editor ng-model="$ctrl.body"></textarea> |
Thanks! One thing I spotted here is that this code doesn't handle rejecting the promise returned by And actually a second thing – the We're aware that this bit with the |
Ok, thanks. .catch((error) => {
console.error(error);
}); |
I have ckeditor v4.7.3 running in my react app. I have file browser/uploads working as well. If I can be of any help please let me know how. |
Here's a VERY primitive Angular2+ example. Note that it only works about 25% of the time for me because of this error. Enough reloading usually gets it to work.
and then the html would look like this:
|
Nice initiative, I think it would be better to have a separate issue for each framework. As for Angular, the main issue I've found is loading svg items, since internally angular cli rule on svg assets is to use file-loader instead of raw-loader used in CKeditor webpack config. The only solution I've came up with is to eject webapack config using 'ng eject' which gives you the whole webpack config under the hood (running webpack would then be exactly same as ng build) but now you do have hands on webpack config. Modifications I've made to make it suitable for my use case:
Note that I had to replace I was trying not to override/modify webpack config and keep with angular cli simple usage but as far as I understood, the only way to have that would be that CKeditor uses file loader for svg resources rather than raw-loader (don't really know what I am talking about thought). |
Hi, This is how I integrated v.5 in vue.js component (with two-way biding): But I feel it's still a little bit "tinker". Ckeditor 5 is mvc based, could not there be the possibility to directly connect/bind the "model" of the editor with vuejs data/model (or other js framework) ?
and use it like that : |
@chihab why do you need to take care about webpack.config and svg integration when using ckeditor with angular ? normaly we only use builds versions of ckeditor in framework projects, not sources ? |
@pat123456 I am also pretty new to ckeditor and your observation totally makes sense. My project has to use a custom build and at the begging I was making a poc to test its integration into an existing angular project |
Ok understand. Yes seems more logic to have a separate framework/build project. Anyway, for the documentation it's certainly the method to describe in priority. |
@pburrows hey i am trying to get ckeditor5 working in my angular 5 app. any ideas ? do i need to add something to modules ? |
The code I posted is a directive. So, make sure that whatever module it is in You do not need to add scripts anywhere else (such as to the Also, I have the directive in a separate "shared" module. If you choose to put it all in the same module, you still need to add it to |
one module -- the app. in trying to make it work i did find that adding it to my angular-cli file DOES make it work. one other item: i am building with angular 5 not 4 -- angular 5 compile / build is a bit different than 4 and may not pull in code if it can not see it used. |
Good point. It is probably a v4 vs v5 difference. I haven't updated to v5 yet. |
@pburrows |
so far i have not found a way to pull in the script unless i use a pre built editor package and use the angular-cli json file. |
With the lastest release, this code no longer works:
After searching through the documentation, I haven't been able to find the proper way to detect changes to the editor. Any ideas? |
Since beta.1 there's no |
We've just released ckeditor5-angular and ckeditor5-react on the NPM 🎉 Both of them provide comprehensive readme files, so you can integrate them easily into your applications. |
Just a note that this ticket should not be closed until we add proper content in the official documentation (a dedicated section/article(s) for integrations). A significant group of users when looking for Angular/React instruction will simply use the search input in the official documentation. The first result that currently is returned when looking for React contains pretty outdated information: |
I updated existing docs (including the FAQ). All of them link to #1002 where I'd like to gather all feedback regarding next frameworks we can work on. |
Hi , I have some problem with svg tag on ckeditor5 . In my case ckeditor filter out svg tag .So i have written schema for this but now SVG tag is now working fine but its child element filter out . please help me on this .
|
There's been a lot of discussion around Angular in #347 but we need some summary in form of a documentation.
Similarly, we need some documentation about integration with React, Vue and Ember.
If anyone is willing to give it a try we'd be grateful for step-by-step introductions to how to initialize and integrate CKEditor 5 with those platforms. The simplest way you can share such tutorials with us is by writing them in comments in this thread and we'll convert them to guides that can be published on https://docs.ckeditor.com/ckeditor5/latest/. Thanks in advance!
UPDATE (27.07.2018)
💥 We released official integrations for React and Angular 💥
The text was updated successfully, but these errors were encountered: