Create A Rich Text Editor Using TinyMCE In Codeigniter

Many time we need a rich text editor when we use custom CMS. So today I will teach you how to create a rich text editor using TinyMCE in codeigniter.
Your final output looks like this:

So lets follow these steps:

Step 1.

Download CI and config it. like database, url and libraries.

Step 2.

Download tinymce javascript library form here tinymce download.
and create a folder name with asset in root directory of application and upload this tinymce library to init.

Step 3.

Create 3 php files.
home.php controller file under the directory(application/controller).
article_model.php model file under the directory (application/models).
home.php view file under the directory(application.views).

Step 4.

Write following code in home controller file or copy code and paste.

[code]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’); class Home extends CI_Controller { public function __construct() { parent::__construct(); $this-&gt;load-&gt;model(‘articleModel’);

}
public function index()
{
$this-&gt;load-&gt;view(‘home’);
}

public function addArticle(){
$title = $_POST[‘title’];
$article = htmlentities( $_POST[‘article’]);
$this-&gt;articleModel-&gt;addArticle($title, $article);

}

public function loadArticle(){
$this-&gt;articleModel-&gt;loadArticle();
}
}

/* End of file welcome.php */
/* Location: ./application/controllers/Home.php */
[/code]

Step 5.

Now write the following code in article_model file or paste the following code in it.

[code]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’); class ArticleModel extends CI_Model { public function addArticle($title, $article){ $date = date(‘d/m/y’); $Addtitle = $title; $Addarticle = $article; $data = array(‘title’=> $Addtitle,
‘content’=>$Addarticle,
‘created’=>$date
);
$this->db->insert(‘tinymce’, $data);
}

public function loadArticle(){
$this->db->order_by("id","desc");
$query = $this->db->get(‘tinymce’);

foreach ($query->result() as $row){
$date = date_create($row->created);
$date = date_format($date, ‘l jS F Y’);
echo’
<blockquote>
<h3>’.ucfirst($row->title).'</h3>
</blockquote>

‘.html_entity_decode($row->content).’

<a href="#" class="btn btn-sm btn-warning">’.$date.'</a><hr/>’;
}
exit;
}

}1““““““““““
[/code]

Step 6.

Finally in step 5, write a view code or paste the following in home.php view file.

[code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>

<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!– Optional theme –>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<!– Latest compiled and minified JavaScript –>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</script>
</head>
<body>
<div class="container">

<blockquote style="background: #333; color: #fff">
<h3>Rich text editor in codeigniter</h3>
<a href="https://www.facebook.com/Meul Tech Classes/">by Meul Tech </a>
</blockquote>

<div class="col-md-12">
<form role="form" id="frmArticle" class="form" action="<?php echo base_url() ?>home/addArticle" method="POST">
<lablel>Title</lablel>
<input type="text" name="title" class="form-control">
<lablel>Content</lablel>
<textarea id="article" name="article" rows="8" class="form-control"></textarea>
<input class="btn btn-info btn-block" type="submit" value="Add new article" name="submit">
</form>
</div>
</div>

</div>

$(document).ready(function(){
loadArticle();
$("#frmArticle").submit(function (e){
e.preventDefault();
tinymce.triggerSave();
var data = $(this).serialize();
var type = $(this).attr(‘method’);
var url = $(this).attr(‘action’);
console.log(data);

$.ajax({
url:url,
type: type,
data: data
}).done(function (html){
$(‘#frmArticle’)[0].reset();
loadArticle();
});
});
});

function loadArticle(){
$.ajax({
url:<?php echo base_url() ?>;home/loadArticle’,
type: ‘GET’
}).done(function (html){
$(".response").html(html);
});
};
<script>
</body>
<html>
[/code]

So Finally your code is ready to use. You can easily integrate this code in your cms for better user UI experience.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.