如何在HTML文件中嵌入CKEditor
- November 8th, 2010
- Posted in 学以致用
- Tags: ckeditor : html
- Write comment
安装
- 先下载CKEDITOR： http://ckeditor.com/
- 把下载的文件解压，放在服务器的某个目录中。
- 检查安装
访问 "http://<your site>/<CKEditor installation path>/_samples/index.html"
例如: "http://www.example.com/ckeditor/_samples/index.html"，你会看到一个包含CKeditor的页面。
在HTML文件中嵌入CKEditor
首先在网页的<head>标签之间加上以下代码：
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
然后创建一个 "textarea":
<textarea name="editor1">Initial text</textarea>
把 CKeditor 整合入"textarea"
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
以上代码可以放在<textarea> 标签之后的任意位置. 也可以在页面载入是就调用这个替换函数，那么就要在 <head>中监听"window.onload" 事件：
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
保存编辑器的数据
在PHP中，可以这样写：
<?php $editor_data = $_POST[ 'editor1' ]; ?>
也可以用 CKEditor API 来取数据：
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
一个完整的例子：
<html> <head> <title>Sample - CKEditor</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br /> <textarea name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" /> </p> </form> </body> </html>
More: CKEditor Configuration
No comments yet.