2015年11月27日

[筆記] CKEditor內容編輯器安裝說明

       
不管你使用的是痞客邦、wordpress、google blogger或其它相關的內容管理系統(CMS, content management system)，在編輯文章的時候，勢必會有一個HTML編輯器，這個編輯器可以讓你選擇字型、改變字體大小、甚至可以直接針對HTML語法進行編輯，少了這個編輯器，部落格大概也經營不下去了。

可是，如果你是想要從頭寫一個網站，而不想要直接套用CMS系統的話，CKEditor就是一個很好的內容編輯器的選擇。
CKEditor是一個免費的內容編輯器套裝，套用的方法非常的簡單！

這裡有CKEditor的示範可以觀看，安裝方法如下。

STEP：下載CKEditor
連結到CKEditor的網站：http://ckeditor.com/
點選「download」


STEP：選擇要下載的模組


這裡一共分成四種模組：
基本款(Basic Package)，能套用的功能最少，是最基本的內容編輯。
標準款(Standard Package)，幾乎涵蓋了一般會用到的內容編輯功能，包括複製、貼上、底線、刪除線、圖片匯入等等。
完整款(Full package)包含了所有的功能，還可以選擇文字的上下標，製作核取方框、選擇按鈕、列印等等。
最後一種則是客製化自己的編輯器(customize CKEditor)，對於CKEditor的功能如果比較熟悉之後，可以針對自己用的到的功能下載就好，減少網頁的負載。

在這裡我們下載Full Package當作範例。

STEP：上傳CKEditor

將下載下來的壓縮檔解壓縮後，上傳到伺服器，儲存到ckeditor這個資料夾中


STEP：載入CKEditor

首先，開啟一個新的頁面。
在<head>和</head>中匯入ckeditor.js
<script src="ckeditor/ckeditor.js"></script>
接著在<body>和</body>間建立表單：
 <body>
        <form name = 'form' action = '#' method='post'>
            <textarea name="content" id="content" rows="10" cols="80"></textarea>
            <input type = 'button' value = '送出' onclick = 'processData()'>
        </form>
</body>
然後在</textarea>後面插入這段語法
<script>
CKEDITOR.replace( 'content', {});
</script>
這段語法的用意是要把原本textarea的部分改成CKEditor的編輯器，因此()裡面的內容一定要和textarea中name屬性的內容一樣才行(這裡是用content)。

完整的程式碼像這樣：


做完這一步之後，沒有問題的話，應該就可以看到CKEditor這個內容編輯器了


STEP：讀取內容
為了要測試內容編輯器有沒有安裝完全，我們可以利用javascript來測試看看是否讀取的到CKEditor裡面的內容，我們一樣在<head>和</head>間插入下面的語法：
  <script>
   function processData(){
   // getting data
   var data = CKEDITOR.instances.content.getData()
   alert(data);
  }
 </script>
在這段語法中，CKEDITOR.instances.content.getData()就是用來抓取CKEditor中內容的語法，如果沒有問題的話，按下送出的時候就會跳出內容編輯器中的內容了！



STEP：傳送資料到伺服器
如果上面的測試都沒問題的話，我們就可以來測試看看把資料傳送到伺服器端，這裡使用的是PHP
我們在網頁的最上方插入這段php語法：
<?
$text = $_POST['content'];
echo "##".$text."##<br>";
?>
並且在剛剛<script>的function中增加送出表單form.submit()的功能
完整的語法如下：
<?
$text = $_POST['content'];
echo "##".$text."##<br>";
?>
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="ckeditor/ckeditor.js"></script>
  <title>CKEditor</title>
  <script>
   function processData(){
   // getting data
   var data = CKEDITOR.instances.content.getData()
   alert(data);
   form.submit();
  }
 </script>
 </head>
 <body>
  <form name = 'form' action = '#' method='post'>
            <textarea name="content" id="content" rows="10" cols="80"></textarea>
            <script>
          CKEDITOR.replace( 'content', {
     //輸入客製化條件
     width: 1000,  //設定內容編輯器寬度
    });
    
            </script>
   <input type = 'button' value = '送出' onclick = 'processData()'>
        </form>
 </body>
</html>

順利的話，就會看到如下的結果嘍！


更多關於CKEditor的說明可參考這裡！

0 意見:

張貼留言