CKEditor是一个丰富的Web文本编辑器,可以在HTML网页中使用。这个HTML文本编辑器允许在桌面编辑器(如Microsoft Word)上找到许多强大的编辑功能。这具有许多优点,如准备邮件内容,创建博客等。这篇文章还解释了如何以多种方式进一步修改或使用文本编辑器,其中可能包括显示/隐藏按钮,控制按钮等。
下载脚本 现场演示
本教程包含三个文件夹,分别是 带有PHP文件的ckeditor,js和css。
ckeditor
---- ckeditor.js
---- config.js // ckeditor配置文件
.......
.......
js
- jquery.min.js
index.php
ajaxPublish.php
config。 php
blogPost.php
blogClass.php
博客表
博客表包含所有博客帖子详细信息。
CREATE TABLE 博客(
出价 INT PRIMARY KEY AUTO_INCREMENT,
标题 VARCHAR(300),
正文 TEXT,
创建 INT,
statusCode ENUM('0','1','2')DEFAULT'1 ');
启用PHP的PDO扩展,在php.ini配置文件中找到它。
index.php
包含javascript代码。$(“#publish”)。click(function(){} - 这里publish是提交按钮的ID名称。使用$(“#postTitle”)。val()和editor.getData()调用主题和文本区域在textarea标签之后总是包括CKEDITOR.replace('postBody')。
<script src =“ ckeditor / ckeditor.js ”> </ script>
<script src =“ js / jquery.min.js ”> </ script>
<script>
$(document)。准备(函数()
{
$(“#publish” )。点击(函数(){
VAR postTitle = $(“#postTitle”).VAL();
VAR editorData =编辑器。的getData();
VAR。postBody = editorData 更换(/&nbsp; / gi,'');
var dataString =' title = '+ postTitle +'
$阿贾克斯({
类型: “ POST ”,
网址: “ ajaxPublish.php ”
数据:dataString,
缓存:假的,
beforeSend:函数(){},
成功:函数(BID)
{
窗口的位置。替换(” blogPage .php?bid = '+ bid);
}
});
返回虚假;
});
})</ script> // HTML代码 添加新帖子<input type =“ text ”id =“ postTitle ”class =“ inputText ”
帖子标题“ />
<textarea id =” postBody “name =” postBody “> </ textarea>
<input type =” submit “value =” Publish “class =” wallButton “id =” publish “/>
<script>
var编辑= CKEDITOR。代替( 'postBody');
</ SCRIPT>
ckeditor / config.js
CKEditor配置文件,在这里您可以启用或禁用CKEditor选项。
CKEDITOR .editorConfig = function(config){
config .htmlEncodeOutput = false ; // HTML编码
配置 .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',团体:['basicstyles','cleanup']},
{name:'
{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']}
];
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 ,模板,单选,多选,表格,文本字段,全选,选择,文本区域,按钮的ImageButton,HiddenField,即时拼写检查,RemoveFormat,BidiLtr,“;
};
config.php
数据库连接配置文件,在这里你必须修改用户名,密码和数据库的详细信息。如果您正在使用其他数据库修改PDO()驱动程序连接值。
<?php
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 / ”); //例如 HTTP:// yourwebsite。
$ dbuser = DB_USERNAME ;
$ dbpass = DB_PASSWORD ;
$ dbname = DB_DATABASE ;
尝试 {
$ 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 ' 连接失败: '。$ e-> getMessage();
}
}
?>
blogClass.php
这个类包含两个方法blogPublish和blogDetails。
<?php
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;
返回 $ bid;
}
catch(PDOException $ e){
echo '{“error”:{“text”:'。$ e-> getMessage()。'}}';
}
}
/ *博客详细* /
公共 职能 blogDetails($ BID)
{
尝试{
$ DB = getDB();
$ stmt = $ db-> prepare(“ SELECT * FROM blog WHERE 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
包含PHP代码,这有助于将博客数据插入到博客表中。
<?php
包含 ' config.php ';
如果(修剪($ _POST [ '标题'])&&修剪($ _POST [ '体']))
{
包括 ' blogClass.php ';
$ blogClass = new blogClass();
$ title = $ _POST ['title'];
$ body = $ _POST ['body'];
echo $ blogClass-> blogPublish($ title,$ body);
}
?>
blogPage.php
使用此功能,您可以根据博客行ID显示现有的博客标题和正文。
<?php
包含 ' config.php ';
如果($ _GET [ '出价']> 0)
{
包括 ' 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>
<“rel =”stylesheet“/>
</ head>
<body id =”main“>
<div>
<h1> <?php echo $ blogData-> title; ?> </ h1> <div> <?php echo $ blogData-> body; ?> </ div> </ div> </ body> </ html>