個人部落格實現的其中一步：新增編輯器

阿新 • • 發佈：2019-01-21

我們都知道，在搭建一個個人部落格的過程中，我們要實現一個寫文章的頁面，這個頁面得支援編輯和格式化文字的功能，那麼這個功能的實現其實是有現成的外掛可以用的，我在檢索的過程中看到一個名字叫：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還有三個橫槓似的按鈕，點選就可以新增程式碼了。

個人部落格實現的其中一步：新增編輯器

個人部落格實現的其中一步：新增編輯器

搭建自己的部落格（十一）：新增根據日期篩選

輕鬆代建個人部落格 Hexo+Github一步步搭建屬於自己的部落格

HEXO個人部落格實現域名訪問

搭建自己的部落格（十九）：新增簡單的評論功能

【不積跬步，無以至千里】個人部落格地址：https://lewky.cn

不積跬步，無以至千里（個人部落格地址：https://lewky.cn）

Django搭建個人部落格：使用者的刪除

Django搭建個人部落格：使用者的註冊

Django搭建個人部落格：重置使用者密碼

記錄自己用python搭建個人部落格系統的完整過程（一）

Mac上基於hexo+GitHub搭建個人部落格(一)

基於雲端儲存的個人部落格網站的設計與實現

搭建個人部落格之 Github + hexo：如何在其他電腦上更新部落格

個人部落格地址：http://oldchen.iwulai.com

使用GitHub + Hexo搭建個人部落格（一）- 安裝

【Hexo】Hexo+Github構建個人部落格（三）：新增面板主題

基於Flask實現個人部落格網站

【oKong | 趔趄的猿】分享程式猿日常，不定期釋出關於SpringBoot、SpringCloud、Java及其他相關教程，記錄工作中碰到的問題。公眾號：lqdevOps，歡迎關注~個人部落格：http://blog.lqdev.cn

ElasticSearch實戰：個人部落格搜尋和首頁內容展示

個人部落格實現的其中一步：新增編輯器

相關推薦