Heim > Backend-Entwicklung > PHP-Tutorial > Ein Schritt bei der Implementierung eines persönlichen Blogs: Hinzufügen eines Editors

Ein Schritt bei der Implementierung eines persönlichen Blogs: Hinzufügen eines Editors

WBOY
Freigeben: 2016-07-29 09:14:41
Original
1295 Leute haben es durchsucht

我们都知道,在搭建一个个人博客的过程中,我们 要实现一个写文章的页面,这个页面得支持编辑和格式化文字的功能,那么这个功能的实现其实是有现成的插件可以用的,我在检索的过程中看到一个名字叫: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><html lang=<span>"en"</span>>
  <head>
    <meta charset=<span>"utf-8"</span>>
    <meta http-equiv=<span>"X-UA-Compatible"</span> c>"IE=edge"</span>>
    <meta name=<span>"viewport"</span> c>"width=device-width, initial-scale=1"</span>>
    <!-- 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"</span> c>""</span>>
    <meta name=<span>"author"</span> c>""</span>>
    <link rel=<span>"icon"</span> 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"</span> rel=<span>"stylesheet"</span>>

    <!-- Custom styles <span>for</span> this template -->
    <link href=<span>"css/blog.css"</span> 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]-->
  </head>
<body>
  <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>  

</body>

</html></span></code>
Nach dem Login kopieren

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


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

以上就介绍了个人博客实现的其中一步:添加编辑器,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

Verwandte Etiketten:
gt lt
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage