CKEditor网页编辑器 中文使用说明(仁王2五周目通关)学会了吗

随心笔谈2年前发布 编辑
183 0
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买


安装

安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成。

1.从我们的网站https://www.jb51.net/codes/21295.html上下载CKEditor的最新版本。

2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。

注意:你也可以将这些文件放在你网站的任何一个地方,默认为“ckeditor”。

测试你的安装

编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看“_samples”目录。访问如下的地址进行测试:

http://<你的网站域名>//_samples/index.html

例如:

http://www.example.com/ckeditor/_samples/index.html

集成

有苦干个方式能将CKEditor集成到你的网页中,在这里介绍最常用的实现方法。

第一步:载入CKEditor

CKEditor 是一个JavaScript 应用程序,你只需要在你的网页中包含一个文件引用就能加载它。如果你已经将CKEditor安装在了你网站的“ckeditor”目录,你可参照如下示例:

复制代码 代码如下:

用以上方式加载,CKEditor JavaScript API 就准备就绪,可以使用了。

第二步:创建一个编辑器实例

CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域,但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。

但是,实际上,CKEditor仍然是使用一个文本区域来传递它的数据到服务器上,这个文本区域对使用者来说是不可见的,所以,你必需创建并编辑一个实例,首先创建一个实例:

注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一样。在这个例子中,我们已经将文本区域(textarea)命名这“editor1”.当接收POST提交的数据时,这个名字将被用在服务器操作。现在,开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换(replace)”这个普通的文本区域(textarea),为此一段JavaScript命令是必须的:

复制代码 代码如下:

CKEDITOR.replace( ‘editor1’ );

上面的脚本块只能包含在网页的

复制代码 代码如下:

window.onload=function()

{

CKEDITOR.replace( ‘editor1’ );

};

第三步:保存编辑器内容数据

按照先前的描述,编辑器正如一个文本区域(textarea)一样工作,所以,当提交一个包含一个编辑器实例的表单时,他的数据也将是很简单的传递,用文本区域(textarea)的名称作为健名来接收数据。举个例子,按照上面的例子,在PHP中我们需要像这样来处理数据:

复制代码 代码如下:

$editor_data=$_POST[ ‘editor1’ ];

?>

客户端数据处理

一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如:

复制代码 代码如下:

var editor_data=CKEDITOR.instances.editor1.getData();

完整例子

复制代码 代码如下:

Sample – CKEditor

My Editor:

CKEDITOR.replace( ‘editor1’ );

您可能感兴趣的文章:CKEditor4配置与开发详细中文说明文档网页编辑器FCKeditor 2.6.4精简配置方法php版本CKEditor 4和CKFinder安装及配置方法图文教程手把手教你 CKEDITOR 4 扩展插件制作手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】ckeditor的使用和配置方法分享PHP CKEditor 上传图片实现代码通过Fckeditor把图片上传到独立图片服务器的方法限制ckeditor上传图片文件大小的方法CKeditor4 字体颜色功能配置方法教程

© 版权声明

相关文章