AngularJS PHP

How to Use CKEditor with AngularJS and PHP

How to Use CKEditor with AngularJS and PHP
Written by Yogesh Koli

How to Use CKEditor in AngularJS and PHP?

In my last tutorial I have given details on how you can work with AngularJs using crud application, In this tutorial I am going to provide solution on how to use CKEditor while using AngularJS into your application, here I will provide a sample demo using PHP to demonstrate use of CKEditor in angularJS.

Tutorial Features:

We will create a quick sample demo of creating Blog Post, which is going to have few basic operations listing below:

  • Create New Blog Post (Use CKEditor for description field of the blog post)
  • Delete Blog Post
  • List Existing Blog Post
  • Update Blog Post (Again Use CKEditor while updating the description field of the blog post and it should be pre populated)

Live Demo:

Things used:

  • PHP
  • AngularJS
  • CKEditor
  • Bootstrap V3
  • jQuery

Let’s get started:

Step 1 – Setup Database Table:

Create new Database and add new table called posts or you can simply use following script to create new table.

MySQL Post table Model

MySQL Posts Table

Let’s start by creating the folder for the application to store sample application files, so go ahead and create new folder to in your php environment setup it can be lamp, xampp, mamp or homestead totally depend on your system php environment.

I am assuming you have your application folder ready to go along with the database that you have created the in the first step.

Step 2 – Design User interface:

Create new file called index.php inside the application folder and setup basic html page according to the given script.

/index.php

In the above script we have added bootstrap, AngularJS and CKEditor, jQuery Library to use and to reference this libraries I am using there CDN version, if you want you visit there website to download source and reference them into the page, it’s all depend on your requirements. it doesn’t matter either on will work.

Let’s design our page using bootstrap, update index.php page according to the following script:

/index.php

If you review above file line by line you will see at the start of the body section I have added ng-app directive to define angularJS module and next I have added ng-controller directive, keep in mind we are going to use those while writing our angularJS script.

Next I have added basic design with bootstrap panel and a button to open up the modal popup along with the ng-click event and then I have added the modal popup to be able to perform the add new post functionality.

If you notice under model popup we have <textarea ck-editor ng-model="post.description"></textarea> element here we have added custom directive for CkEditor, just keep in mind about this directive you have to notice we are going to create that in the angularJS script and this would be the directive which is going to be the responsible to replacing this textarea element to CKEditor.

Step 3- Write Required AngularJS Script:

In this step we are going to write basic require angularJs script to start, so go ahead and add new folder called js and a file under the same folder called ng-script.js if you notice clearly we have already added reference to this file in the above step.

Go ahead and open this file into your editor and add following script:

/js/ng-script.js:

In the above script at the very beginning we have declared angular module which is going to reference to the ng-app directive which we added inside index.php page and next we have a declaration of postController again same we have added inside index.php along with the ng-controllerdirective.

PostController:

This is the place where we are going to have our script to handle post basic operations, right now we have added a post object and method to handle add post click event to open up the model popup.

Step 4 – Create CKEditor AngularJS Directive:

In this step we will needs to create a directive which is responsible for replacing the html element to CKEditor, go ahead and open up the our script file and add following directive right after the postController.

/js/ng-script.js:

With this above directive we all set to go and play with the our demo to added basic add, edit, list and delete feature.

If you go ahead and run the application with the current state and click on add post button you see the following output, which is exactly what we want a CKEditor element where we can add our post detail content.

Modal Popup with CKEditor

Modal Popup with CKEditor

Step 5 – Create PHP CRUD API:

In this step we will create a very basic api using PHP and PDO connection to handle create, read, update and delete post operations:

Go ahed and create folder called script inside the application directory and add following files:

  1. /script/database_connection.php
  2. /script/library.php
  3. /script/create.php
  4. /script/list.php
  5. /script/update.php
  6. /script/delete.php

Open Database Connection file into your editor and add following script and make sure you update the database connection setting variables according to the your php environment settings.

/script/database_connection.php:

Open up the library.php file and use following script:

/script/library.php:

Open up the create.php file into your editor to add following script:

/script/create.php:

/script/list.php:

/script/update.php:

/script/delete.php:

So our PHP api is all set to handle backend operations, now we just need to call this api from angular js and to work on the posts.

okay let’s get back on to the AngularJs Script:

Step 6 – Add new Post:

Go ahead and open up the ng-script.js file into your editor and update PostController it according to the following script:

Now if you run the application and try to add new post it should work, but you won’t see the list right after adding new post, following next step to list all the post.

Step 7 – List all post:

Add following method inside postController after publish post method:

Next open up the index.php page and update the all post panel section according to the following:

Now if your run or refresh the application you will see the list will be there and if you try to add new post it will be append to the existing list.

Step 8 – Update the Post:

Open up the index.php page into your editor and add new bootstrap model to have update feature:

index.php:

Update the Post Controller from ng-script.js:

Give it a try to update your existing post from the demo it should work as showing below:

Update Post Model

Update Post Model

Step 9 – Delete Post

Finally let’s add delete feature into the demo, open up the ng-script.js file add following method into the postController after updatePost method:

Now if you try to delete the post from the list it should work.

let me know if you have any question related to this tutorial using comment box below:

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.

  • Hi Yogesh.. I’ve searched for this tutorial since a week ago and now found on your website.. Thank you so much for this…