个人博客实现的其中一步：添加编辑器-php教程-PHP中文网

个人博客实现的其中一步：添加编辑器

WBOY

发布： 2016-07-29 09:14:41

原创

1275 人浏览过

我们都知道，在搭建一个个人博客的过程中，我们要实现一个写文章的页面，这个页面得支持编辑和格式化文字的功能，那么这个功能的实现其实是有现成的插件可以用的，我在检索的过程中看到一个名字叫：FCKeditor 编辑器的插件(PHP版)，那么接下来我们就将这个编辑器插件嵌入到我们的PHP页面中去。

我们先下载这个插件，然后将其解压到你的博客源文件的根目录下，这时候可以将解压的文件夹重命名，例如重命名为fckeditor 这样子写程序的时候，获得插件主程序源代码文件路径的时候还比较方便。

接下来我们就可以直接来实现页面了：

<code><span><?php </span><span>/*用<strong>include</strong>方法加载类的文件，这个文件会自动判断服务器的PHP版本，4.0自动调用4.0的类，5.0调用5.0的类*/</span><span><strong>include</strong></span> (<span>"fckeditor/fckeditor.php"</span>);  
<span>$oBasePath</span> = <span>$_SERVER</span>[<span>'PHP_SELF'</span>];<span>//用$_SERVER函数得到当前文件的实际路径，这里包括文件名  </span><span>/*用dirname函数得到去掉文件名的路径加上/editor/得到FCKeditor的路径*/</span><span>$oBasePath</span> = dirname (<span>$oBasePath</span>).<span>"/fckeditor/"</span>;  
<span>$ed</span> = <span>new</span> FCKeditor(<span>"con"</span>); <span>//实例化FCKeditor<strong>对象</strong> 给name为con  </span><span>$ed</span>->BasePath = <span>$oBasePath</span>; <span>//程序的地址为上面得到的路径  </span><span>//$ed->ToolbarSet = "Basic"; 是否使用简单模式的开关 </span><span>?></span>"en"</span>>
  
    <meta charset="<span">"utf-8">
    <meta http-equiv="<span">"X-UA-Compatible" c>"IE=edge">
    <meta name="<span">"viewport" c>"width=device-width, initial-scale=1">
    <!-- The above <span>3</span> meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="<span">"description" c>"">
    <meta name="<span">"author" c>"">
    <link rel="<span">"icon" href=<span>"img/favicon.ico"</span>>

    <title>Blog Template <span>for</span> <strong>Bootstrap</strong>
</title>

    <!-- <strong>Bootstrap</strong> core CSS -->
    <link href="<span">"css/<strong>Bootstrap</strong>.min.css" rel=<span>"stylesheet"</span>>

    <!-- Custom styles <span>for</span> this template -->
    <link href="<span">"css/blog.css" rel=<span>"stylesheet"</span>>

    <!-- Just <span>for</span> debugging purposes. Don<span>'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]-->
  

  <div>
      <div>
        <nav>
          <a href="#">Home</a>
          <a href="#">New features</a>
          <a href="#">Press</a>
          <a href="#">New hires</a>
          <a href="#">About</a>
        </nav>
      </div>
    </div>

<?php if($_POST[sub])//判断$_POST[sub]是否为真，真为有内容提交  

{  
    $con = $_POST[con];//读取FCKeditor中的内容  
    $con = str_replace('</span>\\<span>','</span><span>',$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>  



</span></code>

登录后复制

那么这端代码的思路就是，将插件的主程序（或者叫入口）源文件倒入进来，像引入一个库一样，然后我们就可以使用这个“库”中的参数和方法了。

其实到现在我们还遇到了一个问题，这个编辑器吧不支持代码的语法高亮！这对一个程序员来说简直是不可思议的，那么接下来我们要做的事情就是在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还有三个横杠似的按钮，点击就可以添加代码了。