CKEditor集成入门
2019-05-11 本文已影响0人
开心跳蚤
简介
富文本编辑器是基于web的文本编辑器，其功能同样可以很强大，一些功能比较强大的富文本编辑器还被称为在线的office word。本文针对CKEditor富文本编辑器进行学习。
CKEditor是国外开源的富文本编辑器，其功能非常强大，支持内容编辑和文件上传，最关键的是它是不收费的。同样功能很强的富文本编辑器还有tinyMCE，其速度比CKEditor快，同样可以上传文件，不过这个要用到其官网的插件，插件时收费的，此处不作说明。
下面开始进入入门操作：
下载
我们可以访问CKEditor官网下载，对于普通的应用环境，我们可以选择默认的标准安装包进行下载。如果想要使用更多的编辑功能，则可以下载完整套件。
实现
1、将下载的.zip文档解压，将解压后的ckeditor文件夹放入项目中。
2、创建一个包含<textarea>元素的简单HTML页面，然后完成以下两个动作
①使用<script>标签在页面中加载CKEditor
②使用CKEDITOR.replace()方法，将<textarea>元素转变为CKEditor编辑器
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- 确保引入的js文件路径正确 -->
<script src="ckeditor/ckeditor.js"></script>
</meta>
</head>
<body>
<form>
<textarea name="myEdit" id="myEdit" rows="10" cols="80"> Hellow CKEditor </textarea>
<script>
<!-- Replace the <textarea id="myEdit"> with a CKEditor -->
CKEDITOR.replace( 'myEdit' );
</script>
</form>
</body>
</html>
目录结构
3、完成后，在浏览器中打开测试页面。
