检测到您启用了Adblock等屏蔽广告扩展,导致正常的内容图片无法显示,为了不影响阅读体验,建议您将www.xiaoz.me加入白名单。

CKEditor4.3.4基本配置

在学习PHP的时候了解到CKEditor这个强大的网页编辑器,但是看的视频教程上版本较旧已经不适合最新的CKEditor4版本,然后在网上收集整理了一下,做个记录。

一、在页面中引入ckeditor核心文件ckeditor.js

1
2
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/config.js"></script>

二、在使用编辑器的地方插入HTML控件textarea

1
<textarea name="editor" cols="300" rows="8">文本的默认HTML代码</textarea>

三、”editor”是以后你要传给后台脚本语言的post名,也是js要用到的名称。然后,在该页的最底下插入:

1
2
3
<script type="text/javascript">
CKEDITOR.replace( 'editor');
</script>

实列代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script><!--载入js-->
<style type = "text/css">/*限制文本框宽度*/
	#wd
	{
		width:600px;
	}
</style>
</head>
<body>
<div id = "wd">
<form action = "test.php" name = "sub" method = "post"><!--提交表单-->
<textarea name="editor" cols="300" rows="8">文本的默认HTML代码</textarea>
<input type = "submit" name = "sub"  value = "提交" />
</form>
</div>
<!--加载CKEditor-->
<script type="text/javascript">
CKEDITOR.replace( 'editor');
</script>
 
</body>
</html>
<?php
	echo "内容:";//显示刚才的内容,测试否提交成功!
	if(isset($_POST['sub']))
	{
		$content = $_POST['editor'];
		echo $content;
	}
 
?>

下载地址:CKEditor4.3.4精简版

发表评论

电子邮件地址不会被公开。 必填项已用*标注