我们都知道,在搭建一个个人博客的过程中,我们 要实现一个写文章的页面,这个页面得支持编辑和格式化文字的功能,那么这个功能的实现其实是有现成的插件可以用的,我在检索的过程中看到一个名字叫:FCKeditor 编辑器 的插件(PHP版),那么接下来我们就将这个编辑器插件嵌入到我们的PHP页面中去。
我们先下载这个插件,然后将其解压到你的博客源文件的根目录下,这时候可以将解压的文件夹重命名,例如重命名为fckeditor 这样子写程序的时候,获得插件主程序源代码文件路径的时候还比较方便。
接下来我们就可以直接来实现页面了:
<?php
/*用include方法加载类的文件,这个文件会自动判断服务器的PHP版本,4.0自动调用4.0的类,5.0调用5.0的类*/
include ("fckeditor/fckeditor.php");
$oBasePath = $_SERVER['PHP_SELF'];//用$_SERVER函数得到当前文件的实际路径,这里包括文件名
/*用dirname函数得到去掉文件名的路径加上/editor/得到FCKeditor的路径*/
$oBasePath = dirname ($oBasePath)."/fckeditor/";
$ed = new FCKeditor("con"); //实例化FCKeditor对象 给name为con
$ed->BasePath = $oBasePath; //程序的地址为上面得到的路径
//$ed->ToolbarSet = "Basic"; 是否使用简单模式的开关
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<?php
if($_POST[sub])//判断$_POST[sub]是否为真,真为有内容提交
{
$con = $_POST[con];//读取FCKeditor中的内容
$con = str_replace('\\','',$con); //替换\为空,为了让网址能正常显示
echo "文章标题:".$_POST[title].
"<br>文章内容".$con; //输出接收的内容
}
?>
<form method="post" action="">
文章标题<input type="text" name="title" />
<?php $ed->Create(); //创建一个FCKeditor的窗口?>
<input type="submit" name="sub" value="提交新闻" />
</form>
</body>
</html>
那么这端代码的思路就是,将插件的主程序(或者叫入口)源文件倒入进来,像引入一个库一样,然后我们就可以使用这个“库”中的参数和方法了。
其实到现在我们还遇到了一个问题,这个编辑器吧不支持代码的语法高亮! 这对一个程序员来说简直是不可思议的,那么接下来我们要做的事情就是在FCKeditor编辑器中支持代码的语法高亮
好!
在下面这个页面的底部有我们要下载的插件:
insertcode
下面是安装的方法:
安装方法:
1、首先解压压缩包,把解压后的文件夹insertcode放到你BLOG的FCKeditor\editor\plugins文件夹内
(如果insertcode文件夹存在,请先全部删除)
2、退回到FCKeditor目录下,打开编辑fckconfig.js文件,Ctrl+F查找FCKConfig.Plugins.Add关键字的位置
向下浏览,看有没有类似这句FCKConfig.Plugins.Add( ‘insertcode’);的语句。
如果没有请加入
FCKConfig.Plugins.Add( ‘insertcode’ , ‘zh-cn,en’ ) ;
如果有请修改为
FCKConfig.Plugins.Add( ‘insertcode’ , ‘zh-cn,en’ ) ;
3、Ctrl+F查找FCKConfig.ToolbarSets[“Default”]关键字的位置
修改[ ]内的内容,在你需要放置插入代码图标的地方放置语句’InsertCode’
例如放在如下位置:
[‘InsertCode’,’Link’,’Unlink’,’Anchor’,’SpecialChar’,’Smiley’],
4、保存fckconfig.js文件、安装完成。
使用方法:
用FCKeditor编辑、添加文章,找到图标是123还有三个横杠似的按钮,点击就可以添加代码了。