Integrar CKEditor en una página HTML utilizando Javascript

CKEditor es un editor de texto enriquecido para la web, que puede ser utilizado dentro de tus páginas web HTML. Este editor de texto HTML soporta multitud de opciones de edición que puedes encontrar en la mayoría de editores de texto para escritorio, como por ejemplo Microsoft Word, que se pueden integrar al entorno web. CKEditor se caracteriza por sus múltiples ventajas como la posibilidad de crear el contenido de un correo electrónico, edición de posts para un blog y mucho más. En este artículo os explico cómo incorporar este popular editor de texto web, además de gestionarlo como queráis: añadiendo o quitando botones, controlando las opciones que trae por defecto... ¿Estáis preparados? Pues vamos a ello...

Este tutorial contendrá tres carpetas llamadas ckeditor, js y css, con los distintos archivos php.

ckeditor
---- ckeditor.js
---- config.js
.......
.......
js
-- jquery.min.js
index.php
ajaxPublish.php
config.php
blogPost.php
blogClass.php

Para este tutorial nos vamos a basar en el caso de crear un blog y utilizar el editor para confeccionar el contenido.

Tabla blog

Las tabla blog albergará todos los datos relativos al blog.

CREATE TABLE blog(
bid INT PRIMARY KEY AUTO_INCREMENT, 
title VARCHAR(300), 
body TEXT, 
created INT,
statusCode ENUM('0','1','2') DEFAULT '1');

Habilita la extensión PDO para PHP. Esto se puede hacer modificando el archivo php.ini de tu configuración de PHP.

index.php

Este archivo contendrá el código javascript. $("#publish").click(function(){}, aquí publish es el ID del botón submit que utilizaremos para enviar el formulario. Utilizando $("#postTitle").val() y editor.getData() haremos referencia al título del post y al contenido del post en sí, respectivamente. Siempre incluye CKEDITOR.replace('postBody') después del tag del textarea.

<script src="ckeditor/ckeditor.js"></script>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#publish").click(function(){
var postTitle = $("#postTitle").val();
var editorData = editor.getData();
var postBody=editorData.replace(/&nbsp;/gi,' ');
var dataString = 'title='+ postTitle +'&body='+postBody;
$.ajax({
type: "POST",
url: "ajaxPublish.php",
data: dataString,
cache: false,
beforeSend: function(){},
success: function(bid)
{
window.location.replace('blogPage.php?bid='+bid);
}
});
return false;
});
}) 
</script>
//HTML Code
Add New Post
<input type="text" id="postTitle" class="inputText" placeholder="Post title"  />
<textarea id="postBody" name="postBody"></textarea>
<input type="submit" value="Publish" class="wallButton" id="publish"/>
<script>
var editor=CKEDITOR.replace('postBody');
</script>

ckeditor/config.js

Este es el archivo de configuración del CKEditor. Desde aquí podrás habilitar/deshabilitar opciones del propio editor.

CKEDITOR.editorConfig = function(config) {
config.htmlEncodeOutput = false; //HTML encode
config.entities = false;
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Outdent,Indent,CreateDiv,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Styles,FontSize,ShowBlocks,About,Subscript,Superscript,Find,Replace,Cut,Copy,Paste,PasteText,PasteFromWord,Templates,Radio,Checkbox,Form,TextField,SelectAll,Select,Textarea,Button,ImageButton,HiddenField,Scayt,RemoveFormat,BidiLtr,BidiRtl,Language,Anchor,Source,Save,Templates,NewPage,Preview,Print,Undo,Redo';
};

config.php

Este es el archivo desde donde conectaremos con la base de datos. Aquí podemos modificar el nombre de usuario, la contraseña y demás detalles de la base de datos. Si estás utilizando otra base de datos, modifica el valor del driver de conexión PDO().

session_start();
/* DATABASE CONFIGURATION */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'databasename');
define("BASE_URL", "http://localhost/PHPLoginHash/"); // Eg. http://yourwebsite.com

function getDB()
{
$dbhost=DB_SERVER;
$dbuser=DB_USERNAME;
$dbpass=DB_PASSWORD;
$dbname=DB_DATABASE;
try {
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
}

blogClass.php

Esta clase contiene dos métodos: blogPublish y blogDetails.

class blogClass
{
/* Blog Publish */
public function blogPublish($title,$body)
{
try{
$db = getDB();
$created=time();
$stmt = $db->prepare("INSERT INTO blog(title,body,created) VALUES(:title,:body,:created)"); 
$stmt->bindParam("title", $title,PDO::PARAM_STR) ;
$stmt->bindParam("body", $body,PDO::PARAM_STR) ;
$stmt->bindParam("created", $created,PDO::PARAM_INT) ;
$stmt->execute();
$bid=$db->lastInsertId();
$db = null;
return $bid;
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}

/* Blog Details */
public function blogDetails($bid)
{
try{
$db = getDB();
$stmt = $db->prepare("SELECT * FROM blog WHERE bid=:bid"); 
$stmt->bindParam("bid", $bid,PDO::PARAM_INT) ;
$stmt->execute();
$blogData=$stmt->fetch(PDO::FETCH_OBJ);
$db = null;
return $blogData;
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}

}

ajaxPublish.php

Este archivo será el encargado de insertar el contenido del post en la base de datos.

include 'config.php';
if(trim($_POST['title']) && trim($_POST['body']))
{
include 'blogClass.php';
$blogClass = new blogClass();
$title=$_POST['title'];
$body=$_POST['body'];
echo $blogClass->blogPublish($title,$body);
}

blogPage.php

Mediante este archivo, el sistema será capaz de mostrar el título y el contenido del post basándose en la celda de la tabla blog, id.

include 'config.php';
if($_GET['bid']>0)
{
include 'blogClass.php';
$blogClass = new blogClass();
$bid=$_GET['bid'];
$blogData=$blogClass->blogDetails($bid);
}
else
{
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Blog Page</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body id="main">
<div>
<h1><?php echo $blogData->title; ?></h1>
<div>
<?php echo $blogData->body; ?>
</div>
</div>
</body>
</html>

Fuente: 9lessons.info