溫瑞烘老師的教學歷程檔案(Teaching ePortfolio) - 中華科技大學數位化學習歷程

如何使用
1. 將ckeditor資料夾放置於localhost/myep/之下
2. 利用下列範例寫一程式測試

<?php

$command=$_POST["command"];

if ($command=="") {

display_first_page();

}elseif ($command=="儲存" ) {

display_store_page();

//echo "<script> window.history.back() </script>";

}

function display_first_page() {

echo "<html><head><title>認識CKEditor網頁編輯器</title>

</head><body><center>

<textarea name='content' id='content' rows=30 cols=80 >$content</textarea>";

include_once "./ckeditor/ckeditor.php";

$CKEditor = new CKEditor();

$CKEditor->basePath = './ckeditor/';

$CKEditor->replace("content");

echo "<input type='submit' name='command' value='儲存'>

</form></center></body></html>";

}

function display_store_page() {

$content=trim($_POST["content"]);

$content=htmlspecialchars($content);

echo $content;

}

3. 將ckeditor/config.js加以編輯, 選擇你認為常用的功能

For licensing, see LICENSE.html or http://ckeditor.com/license

CKEDITOR.editorConfig = function( config ) {

CKEDITOR.config.toolbar_Full =

[

{ name: 'document',items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

{ name: 'clipboard',items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

{ name: 'editing',items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

{ name: 'forms',items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

'/',

{ name: 'basicstyles',items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

{ name: 'paragraph',items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

{ name: 'links',items : [ 'Link','Unlink','Anchor' ] },

{ name: 'insert',items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

'/',

{ name: 'styles',items : [ 'Styles','Format','Font','FontSize' ] },

{ name: 'colors',items : [ 'TextColor','BGColor' ] },

{ name: 'tools',items : [ 'Maximize', 'ShowBlocks','-','About' ] }

];

};

4. 作業： (1). 將前述2之範例擴充, 顯示結果之後丟出一個按鈕 "更新", 可以更新內容之後儲存
(2). 分別使用第3項所設定的功能舉例, 檢視其原始碼, 並將結果放入本學期的作業中

第10週-CKEditor HTML編輯器