CKEditor网页编辑器 中文使用说明

安装
安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。
1.从我们的网站http://www.jb51.net/codes/21295.html上下载CKEditor的最新版本。
2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。
注意：你也可以将这些文件放在你网站的任何一个地方，默认为“ckeditor”。
测试你的安装
编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。访问如下的地址进行测试：
http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html
例如：
http://www.example.com/ckeditor/_samples/index.html
集成
有苦干个方式能将CKEditor集成到你的网页中，在这里介绍最常用的实现方法。
第一步：载入CKEditor
CKEditor 是一个JavaScript 应用程序，你只需要在你的网页中包含一个文件引用就能加载它。如果你已经将CKEditor安装在了你网站的“ckeditor”目录，你可参照如下示例：


代码如下:

<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

用以上方式加载，CKEditor JavaScript API 就准备就绪，可以使用了。
第二步：创建一个编辑器实例
CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域，但用文本区域要实现同样的效果，并不容易，它需要用户输入html代码。
但是，实际上，CKEditor仍然是使用一个文本区域来传递它的数据到服务器上，这个文本区域对使用者来说是不可见的，所以，你必需创建并编辑一个实例,首先创建一个实例：
<textarea name="editor1"><p>Initial value.</p></textarea>
注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一样。在这个例子中，我们已经将文本区域（textarea）命名这“editor1”.当接收POST提交的数据时，这个名字将被用在服务器操作。现在，开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换（replace）”这个普通的文本区域（textarea），为此一段JavaScript命令是必须的：


代码如下:

<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>

上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程，但是在这种情况下你需要对“window.onload”事件进行监听：


代码如下:

<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>

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


代码如下:

<?php
$editor_data = $_POST[ 'editor1' ];
?>

客户端数据处理
一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用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>

赞 (0)

相关推荐

  • ckeditor syntaxhighlighter代码高亮插件，完美修复

    ckeditor syntaxhighlighter代码高亮插件，完美修复

    CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵 来个图 使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C

  • ckeditor的使用和配置方法分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

    因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号.换行等的干扰,只有先读入到 textarea 最方便. 使用 CKeditor 3.0.1 复制代码 代码如下: <textarea cols="90" rows="10" id="content" name="content">cftea</textarea> <scr

  • FCKeditor .NET的配置、扩展与安全性经验交流

    FCKeditor .NET的配置、扩展与安全性经验交流

    前言 FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置.功能扩展(如自定义文件上传子目录.自定义文件名.上传图片的后期处理等).以及安全性进行初步的阐述. 希望能帮助有同样需求的同仁节省一点时间:也希望各位能指正其中的不足.谢谢. 一.自定义 FCKeditor 的 BasePath BasePath 即FCKeditor在网站中的相对路径,默认值是 /fckeditor/,最好在Web.confi

  • FCK编辑器（FCKEditor）添加新按钮和功能的修改方法

    需要修改的文件: fckconfig.js zh-cn.js en.js fckeditorcode_gecko.js || fckeditorcode_ie.js(针对IE以外的浏览器||针对ie浏览器,如果要支持两种浏览器,就这两个包都修改) 第一步:在Toolbar中添加功能按钮 fckconfig.js:FCKConfig.ToolbarSets["Default"] 中添加按钮名称 FCKConfig.ToolbarSets["Default"] = [

  • fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

    content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

  • CKEditor 附插入代码的插件

    CKEditor 附插入代码的插件

    按照惯例,先来段废话:CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 从官网下载ckeditor,我下载的是ckeditor_3.0.2.CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter". 1.在"cked

  • CKEditor网页编辑器 中文使用说明

    安装 安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成. 1.从我们的网站http://www.jb51.net/codes/21295.html上下载CKEditor的最新版本. 2.将下载的文件解压到你网站目录下的"ckeditor"文件夹里. 注意:你也可以将这些文件放在你网站的任何一个地方,默认为"ckeditor". 测试你的安装 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看"_samples&q

  • kindSoft在线网页编辑器简单的配置参数介绍

    kindSoft在线网页编辑器简单的配置参数介绍

    对于网页编辑器对做项目的时候是非常的又用的一个编辑器,大大的减轻了开发人员的负担,感觉KindSoft是一个不错的选择,因此也在不断的使用. 下面对一些简单的配置进行归纳一下: 首先是将下载的KindSoft文件导入到项目的目录下: 复制代码 代码如下: <script src="../Content/kindeditor-4.1.4/kindeditor-all.js" type="text/javascript"></script> &l

  • 基于Vue2-Calendar改进的日历组件（含中文使用说明）

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • 网页编辑器ckeditor和ckfinder配置步骤分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • php下FCKeditor2.6.5网页编辑器的使用方法

    1.首先去官网下载FCKeditor2.6.5 多国语言版.http://ckeditor.com/download,注意:第一个为最新3.0.1版,第二个才是FCKeditor 2.6.5 2.删除不必要的东西: 删除/FCKeditor/目录下除fckconfig.js,fckeditor.js,fckstyles.xml,fcktemplates.xml,fckeditor.php,fckeditor_php5.php,fckeditor_php4.php 七个文件以外的所有文件: 删除目

  • 19款Javascript富文本网页编辑器

    19款Javascript富文本网页编辑器

    1. AIE (演示地址) AIE是一个开源的ajax图片编辑器,基于ExtJS与PHP ImageMagick开发,易于与博客/相册等其它应用相集成.提供调整图片大小,裁剪图片,旋转/翻转图片,应用滤镜,添加文本,添加水印等功能. 2. MarkitUp (演示地址) MarkitUp是一个轻量级,可定制,灵活的WYSIWYG Editor. 3. SmartMarkUP SmartMarkUP是一个轻量级,强大的JavaScript library,它能够将Textarea控件转换成富文本编

  • 网页编辑器FCKeditor 2.6.4精简配置方法

    上传目录请在fckeditoreditorfilemanagerconnectorsaspconfig.asp中设置 Dim ConfigUserFilesPathConfigUserFilesPath = "/userfiles/" 中文配置说明:因为下载下来的压缩包里面有包含很多在我们使用时,用不到的,不删除也行.看个人喜好下面以PHP为例,进行程序瘦身 删除所有"_"开头的文件和文件夹 删除FCKeditor的目录下: fckeditor.afpfckedit

  • php网页标题中文乱码的有效解决方法

    刚刚测试了一个php的网页,结果发现标题中文乱码,于是乎,搜搜得到了一个比较不错的答案 在<title>标签前面添加以下一句话就解决了 复制代码 代码如下: <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>

  • eWebEditor_v280_Free_Final最好用的网页编辑器下载

    eWebEditor V2.80最终版 说明 目录结构说明 ============================= admin              : 后台管理相关图片 buttonimage        : 按钮图片 css                : 样式文件 db                 :  数据库文件 dialog             : 对话框相关文件 example            : 例子 include            : 公用包含文件

  • 常用网页编辑器漏洞手册（全面版）fckeditor,ewebeditor

    FCKeditor FCKeditor编辑器页/查看编辑器版本/查看文件上传路径 FCKeditor编辑器页 FCKeditor/_samples/default.html 查看编辑器版本 FCKeditor/_whatsnew.html 查看文件上传路径 fckeditor/editor/filemanager/browser/default/connectors/asp/connector.asp?Command=GetFoldersAndFiles&Type=Image&Curren

随机推荐