標題: [技術文章] CKEditor內容編輯器安裝說明
無頭像
s6351301

註冊 2013-3-2
用戶註冊天數 4045
狀態 離線
發表於 2017-7-25 19:47 
61.64.209.251
分享  私人訊息  頂部
https://pjchender.blogspot.tw/2015/11/ckeditor.html

[筆記] CKEditor內容編輯器安裝說明in 網頁設計資源分享  with 沒有留言


不管你使用的是痞客邦、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
<scriptsrc="ckeditor/ckeditor.js"></script>接著在<body>和</body>間建立表單:
<body><formname='form'action='#'method='post'><textareaname="content"id="content"rows="10"cols="80"></textarea>            <inputtype='button'value='送出'></form></body>然後在</textarea>後面插入這段語法
<script>CKEDITOR.replace('content',{});</script>這段語法的用意是要把原本textarea的部分改成CKEditor的編輯器,因此()裡面的內容一定要和textarea中name屬性的內容一樣才行(這裡是用content)。

完整的程式碼像這樣:


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



STEP:讀取內容
為了要測試內容編輯器有沒有安裝完全,我們可以利用javascript來測試看看是否讀取的到CKEditor裡面的內容,我們一樣在<head>和</head>間插入下面的語法:
<script>function processData(){// getting datavar 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><metacharset="UTF-8"><scriptsrc="ckeditor/ckeditor.js"></script><title>CKEditor</title><script>function processData(){// getting datavar data = CKEDITOR.instances.content.getData()   alert(data);   form.submit();}</script></head><body><formname='form'action='#'method='post'><textareaname="content"id="content"rows="10"cols="80"></textarea><script>          CKEDITOR.replace('content',{//輸入客製化條件     width:1000,//設定內容編輯器寬度});</script><inputtype='button'value='送出'></form></body></html>順利的話,就會看到如下的結果嘍!


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