CKEditor(線上富文字編輯器)的安裝與使用

來源:互聯網
上載者:User

想必大家都在緊張的開發實驗室所布置的任務開發一個blog,很有壓力和興趣吧?

  我們在開發的同時也想做出自己的特色,張意乾想做個部落格系統,誰註冊就產生一個新blog,這樣做肯定要多設計幾套模板的,資料庫設計也有問題,我想把一個部落格做精。

  想起上次的留言板,我想其實可以加插入表情功能的,又想到現在流行的系統無論是CMS還是BBS,在編輯留言時都能進行改變字型、插入圖片等功能,遙想到N年前有個叫ewebeditor的程式(很多人未改預設密碼出了很多問題的那個程式),可惜收費的,今天終於找到了個代替品CKEditor,不錯!

:http://www.cngr.cn/soft/download.asp?softid=38187&downid=58&id=46464

安裝 配置教程

  • 安裝
  • 安裝CKEditor是一件容易的工作,只需要按照下面的簡單步驟就可以完成。
    1.從我們的網站http://ckeditor.com.cn上下載CKEditor的最新版本。
    2.將下載的檔案解壓到你網站目錄下的“ckeditor”檔案夾裡。
    注意:你也可以將這些檔案放在你網站的任何一個地方,預設為“ckeditor”。
  • 測試你的安裝
  • 編輯器附帶有一些用來驗證安裝結果是否能正常啟動並執行簡單的例子網頁,請查看“_samples”目錄。訪問如下的地址進行測試:
  • http://<你的網站網域名稱>/<CKEditor 安裝路徑>/_samples/index.html
    例如:
    http://www.example.com/ckeditor/_samples/index.html
  • 整合
  • 有苦幹個方式能將CKEditor整合到你的網頁中,在這裡介紹最常用的實現方法。
  • 第一步:載入CKEditor
  • CKEditor 是一個JavaScript 應用程式,你只需要在你的網頁中包含一個檔案引用就能載入它。如果你已經將CKEditor安裝在了你網站的“ckeditor”目錄,你可參照如下樣本:
  • <head><br />...<br /><mce:script type="text/javascript" src="/ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script><br /></head>
  • 用以上方式載入,CKEditor JavaScript API 就準備就緒,可以使用了。
  • 第二步:建立一個編輯器執行個體
  • CKEditor就像一個在你網頁中的文本地區(textarea)一樣工作,它提供了一個簡單易寫的使用者介面、版式和豐富的文字輸入地區,但用文本地區要實現同樣的效果,並不容易,它需要使用者輸入html代碼。
    但是,實際上,CKEditor仍然是使用一個文本地區來傳遞它的資料到伺服器上,這個文本地區對使用者來說是不可見的,所以,你必需建立並編輯一個執行個體,首先建立一個執行個體:
  • <textarea name="editor1"><p>Initial value.</p>
  • 注意,如果你想要載入一些資料到編輯器中,例如從資料庫中讀出資料,只需要把資料放在文本地區(textarea)內就可以了,就像上面的例子一樣。在這個例子中,我們已經將文本地區(textarea)命名這“editor1”.當接收POST提交的資料時,這個名字將被用在伺服器操作。現在,開始使用CKEditor Javascript API,我們用一個編輯器執行個體來“替換(replace)”這個普通的文本地區(textarea),為此一段JavaScript命令是必須的:
  • <mce:script type="text/javascript"><!--<br />CKEDITOR.replace( 'editor1' );<br />// --></mce:script>
  • 上面的指令碼塊只能包含在網頁的<textarea>標籤之後。也可以在<head>標籤內運行這個替換過程,但是在這種情況下你需要對“window.onload”事件進行監聽:
  • <mce:script type="text/javascript"><!--<br />window.onload = function()<br />{<br />CKEDITOR.replace( 'editor1' );<br />};<br />// --></mce:script>
  • 第三步:儲存編輯器內容資料
  • 按照先前的描述,編輯器正如一個文本地區(textarea)一樣工作,所以,當提交一個包含一個編輯器執行個體的表單時,他的資料也將是很簡單的傳遞,用文本地區(textarea)的名稱作為健名來接收資料。舉個例子,按照上面的例子,在PHP中我們需要像這樣來處理資料:
  • <?php<br />$editor_data = $_POST[ 'editor1' ];<br />?>
  • 用戶端資料處理
  • 一些用應中(如ajax應用)需要在用戶端處理完所有的資料,然後用它自己的方式向伺服器發送資料,在這些情況下,使用CKEditor API就足以輕鬆擷取編輯器執行個體中的內容。例 如:
  • <script type="text/javascript"><br />var editor_data = CKEDITOR.instances.editor1.getData();
    </script>
  • 完整例子
  • <html><br /><head><br /><title>Sample - CKEditor</title><br /><mce:script type="text/javascript" src="/ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script><br /></head><br /><body><br /><form method="post"><br /><p><br />My Editor:<br /><br /><textarea name="editor1"><p>Initial value.</p>

     

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.