Photo by Christopher Flynn on UnsplashA Detailed Approach to Setting Up CKEditor with AngularOpeoluwa Iyi-KuyoroBlockedUnblockFollowFollowingMay 27You may be working on a blog for yourself, and wondering how you are going to manage the rich text content.
In this article, I try to show a step by step approach of setting up a rich text editor that supports image uploads to a cloud service.
Who is this article for?I work with Angular or I have some knowledge about how Angular works.
I am trying to build an editor that uploads the images to a cloud service in this case Cloudinary.
I already know how to work with CKEditor but I can’t seem to figure out the image upload aspect of it.
I am looking for a tool that helps hook up automatic image uploads from CKEditor to Cloudinary.
What Would we be Building?We are going to be building a very simple web app that allows the user to create rich text content on the web.
After writing and submitting the content, the user will be redirected to a different page where the content is displayed for reading.
The sample code for the project can be found here.
IyiKuyoro/ckeditor-image-uploadA repo for my tutorial on image uploads from ckeditor5 – IyiKuyoro/ckeditor-image-uploadgithub.
comHere is what the editor page of the would look like.
A screenshot of the editor pageSetting up the angular projectThe quickest way to get an Angular app setup is to use the CLI.
In this tutorial, we will be using Angular 7 which is the latest version at the time of making this tutorial.
So go ahead and install that globally if you haven't already.
npm i –save @angular/cliThe next thing you will want to do would be to set up the Angular project.
I am going to call my project RichEditor.
You can do that by creating the angular project using the command below.
Please setup with Angular routing and CSS when prompted.
ng new RichEditorLunch the app in dev mode.
ng serveBy now you should have the regular first page of any Angular app you create with the CLI.
Setting Up the Text EditorOur editor page is going to have the following:An input box for the title.
The CKEditor 5 balloon editor element.
A submit button that only displays when the above two fields have been populated.
In order to speed things up and minimize styling frustrations, we are going to make use of bootstrap.
I am by no means a bootstrap expert, in fact, I don’t use it.
So pardon me if I do things a bit inefficiently here.
Adding bootstrapInstall bootstrap and some of its dependencies with the command below.
npm install –save bootstrap jquery popperAdd the bootstrap styles to your Angular styles like so.
The Angular styles loaded at startupNote that you would have to restart the server to see the effects of bootstrap.
Creating the Editor PageWe are going to create the editor page as the default route for this app.
First, we create the editor component that will house all the elements mentioned above.
ng g c EditorThen add it to the routes as the default route.
The app routesOf course, that would not cause the page to show up by default so we will make use of <router-outlet> to display the page.
Go back to the app.
component.
html file and replace all its content with <router-outlet>.
This should change the contents of the default page to “editor works”.
That’s great.
Now for some intended content.
One thing that would be needed to make our work with the content a lot neater and better structured would be the use of an Article type.
So let’s quickly add an interface for that.
I like to add all my classes and interfaces for type definition in a folder called models located in the src folder.
Below is a simple IArticle interface we will be using.
The Article interfaceBefore we add the editor, let’s set up the input box for the title and the buttons with Angular template driven forms for speed's sake.
Just a dash of CSS here.
Some component code to bring it all home.
To add the editor, the first thing would be to install the ckeditor5 angular package.
This package contains the CKEditor module that will enable the setup possible.
We will also need to install the exact editor we wish to use.
In this case, because we want to keep the editor clean and distraction-free, we will be using balloon.
Here is the command to install both packages.
npm i @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-balloonAdd CKEditorModule to the list of imports in the app.
modle.
ts file.
Don’t forget to import it from @ckeditor/ckeditor5-angular first.
Next, we need to add the editor itself to our template.
In order for us to do that, we need to first import the balloon editor into the editor.
component.
ts file.
import * as BalloonEditor from '@ckeditor/ckeditor5-build-balloon';.
Create a new field in the EditorComponent class and assign it to the BallonEditor.
Once that is done, you would then need to declare the config object as well that will hold all the settings of the editor.
Editor = BalloonEditor;editorConfig = { placeholder: 'Type the content here!',};.
You can find more properties of the config object here.
Note that there is currently a known issue with using the placeholder property in production.
I have left it in here for the sake of completeness and because it works well on the dev server.
I will come back to remove this note once that issue has been resolved.
Your editor.
component.
ts file should look like the below now.
To display the editor on the page, simply add the ckeditor tag along with the other attributes between the input element and the button like so.
<ckeditor [config]="editorConfig" [editor]="Editor" required [(ngModel)]="article.
text" data="" name="text"></ckeditor>.
This would cause a simple editor on the page that is clean and distraction free.
You can format text and add images by simply highlighting text and using the tooltip.
A screenshot of the editor displaying som lorem ipsum textIf you try to add an image now you will notice a problem right away.
The image does not seem to be added and an error is displayed in the console that says “filerepository-no-upload-adapter: Upload adapter is not defined.
” That’s exactly right.
You need to set up the image upload adapter so CKEditor knows where to upload images you embed to.
There are two major ways of doing this and instructions on both can be found here.
But you are in luck!.I wrote a custom adapter that does exactly that for you with Cloudinary.
Let’s see how to set that up.
Adding the Cloudinary image upload adapterFirstly, head over to Cloudinary and create an account if you haven't already.
You can change your assigned cloud name on signup if you wish.
Get your cloud name from the dashboard and then follow instructions that can be found here to create an unsigned upload preset.
You will be needing those two variables soon.
Then, install the package that helps us do this on the fly from npm.
Not to worry, it is very lightweight and does not have any dependencies.
npm i ckeditor-cloudinary-uploader-adapterOnce that is done, the next thing you would want to do would be to add a factory function in the editor.
component that CKEditor uses in creating the upload adapter on the fly, using the package you have just installed.
import { CloudinaryImageUploadAdapter } from 'ckeditor-cloudinary-uploader-adapter';.
imagePluginFactory(editor) { editor.
plugins.
get( 'FileRepository' ).
createUploadAdapter = ( loader ) => { return new CloudinaryImageUploadAdapter( loader, 'your_cloud_name', 'your_unsigned_upload_preset'); };}.
Once that is done, add the factory function as the only element of the extraPlugins array.
extraPlugins is a property of the editorConfig object we added earlier.
editorConfig = { placeholder: 'Type the content here!', extraPlugins: [ this.
imagePluginFactory ],};Your editor.
component.
ts file should now look like the below.
And that’s it.
You should be able to upload images now.
Complete with an upload progress bar and a tick when the image has been successfully uploaded.
But there is one more thing.
The images would not be responsive.
To manage that, all we need to do is add one last property to the CloudinaryImageUploadAdapter constructor.
This should be an array of numbers that represent image sizes we want CKEditor to use in supporting image responsiveness.
Keep in mind that this must be done from the smallest size to the largest, and sizes are in pixels.
Here is how.
Now we have support for responsive images.
Go ahead and add some images to the text area.
Wait for the images to upload and head over to your Cloudinary dashboard, you should be able to see the images that have been uploaded.
Submitting the FormThe last thing for us to do here would be to submit the form and send the data to a new route for displaying.
Ideally, you may want to send the new article to a backend server for storage or something of that nature.
Create a new Route and ComponentGenerate a new component and call it “View”.
Add a new route with a path “view” to the app routes and use the newly created ViewComponent as its component.
ng g c viewDisplaying the new Article in the View RouteIn the onSubmit function of the editor.
component.
ts file, navigate to the view route and pass along the new article as the NavigationExtra’s state.
You would need to inject the Angular router for this to work.
onSubmit() { this.
router.
navigate(['/view'], { state: this.
article});}To display the article content, here is what the view.
component.
html file should look like.
You would see that we are still making use of the ckeditor element there to render the content of the article.
That is exactly right.
We could use a div or a paragraph, and that would render the content, but there would be no support for image responsiveness.
It is important however to set the disabled property to true so the content is not editable.
While the view.
component.
ts file should look like this.
There we have it.
We have been able to learn how to do the following in this article:Setup CKEditor5 balloon editorSetup a simple Cloudinary image upload adapter for CKEditorAdd support for responsive imagesDisplay the rich text content on a browser pageThanks for reading!.. More details