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的說明可參考這裡
Share:

0 意見:

張貼留言