中文 html 編輯器
從官方網站下載回來，解壓縮，放到網站資料夾裡面。
第一種使用方式，嵌入 js 檔，使用 HTML 的 class 方式呼叫：
1. 在 head 標籤嵌入 js 檔：
<script type="text/javascript" src="/abc/ckeditor/ckeditor.js"></script>
2. 然後在 body 裡面，新增文字區域，並將類型設定為 ckeditor。
程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form id="form1" name="form1" method="POST" action=""> <textarea class="ckeditor" cols="80" id="001" name="001" rows="60"></textarea> </form> </body> </html>
第二種方式，嵌入 js 檔，使用 Javascript 的函數方式呼叫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="ckeditor.js"></script></head>
<body>
<form id="form1" name="form1" method="POST" action="">
<!-- 嵌入第1個編輯器 -->
<textarea id="editor1" name="editor1" cols="80" rows="10"></textarea>
<script type='text/javascript'>
CKEDITOR.replace('editor1');
</script>
<!-- 嵌入第2個編輯器 -->
<textarea id="editor2" cols="80" rows="10" name="editor2"></textarea>
<script type='text/javascript'>
CKEDITOR.replace('editor2',{skin : 'office2003'}); //使用 Office 2003 的樣版
</script>
</form>
</body>
</html>
第三種方式，嵌入 js 檔，使用 PHP 的物件方式呼叫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="">
<textarea id="pd_content" name="pd_content" cols="80" rows="10"></textarea>
<?php
include("../ckeditor/ckeditor.php");
$CKEditor2 = new CKEditor();
$CKEditor2->basePath = '../ckeditor';
$CKEditor2->replace('pd_content');
$_SESSION['ckeditor_baseUrl'] = '/abc/images/';
?>
</form>
</body>
</html>
第四種方式，只使用 PHP 物件，不引用 js 檔：
用這種方式不需要在檔頭引用 js ，而是完全用 php 的方式，利用 php 物件產生文字區域。
<form id="form1" name="form1" method="POST" action="">
<?php
include("ckeditor/ckeditor.php");
$CKEditor = new CKEditor();
$CKEditor->returnOutput = true;
$CKEditor->basePath = '../../';
$CKEditor->config['width'] = 750;
$CKEditor->config['height'] = 600;
$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 30);
$initialValue = 'This is CKEditor';
$code = $CKEditor->editor("textarea_name", $initialValue); //文字區域名稱、起始內容
echo $code;
?>
</form>
顯示出來的模樣
左上角那個 3.5 吋磁碟片的圖案是儲存按鈕，送出表單。
其它參考：
CKEditor 的樣版修改 (方法跟上面類似，但標籤裡使用 id)
沒有留言:
張貼留言