`

CkEditor的使用指南

阅读更多

因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号、换行等的干扰,只有先读入到 textarea 最方便。

使用 CKeditor 3.0.1
复制代码 代码如下:
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content");
//-->
</script>

可以看出,3.x 版本的使用非常方便,也不用担心会形成两个同名的 content。实际上 textarea 的 id 省略了也是可以的,因为 CKEditor 会先按 name 来查找,查找不到,再按 id 来查找。

并且编辑器会在 textarea 的位置替换原有的 textarea。

设置编辑器皮肤、宽高
复制代码 代码如下:
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content",
{
skin: "kama", width:700, height:300
});
//-->
</script>

skin 值应该是 ckeditor/skins 文件夹下的某个文件夹名称,如果指向不存在的皮肤,则不会显示编辑器。

设置值、取值

设置值

CKEDITOR.instances.content.setData("脚本之家"); // content 就是前面 CKEDITOR.replace 的第一个参数值

复制代码 代码如下:
var editor = CKEDITOR.replace("content");
editor.setData("脚本之家");

取值

alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一个参数值

var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入图片

若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。

CKEDITOR.instances.content.insertHtml("<img src=...>");

详细出处参考:http://www.jb51.net/article/22654.htm

0
1
分享到:
评论

相关推荐

    php168 整站系统与ckeditor整合指南

    《php168 整站系统与ckeditor整合指南》 在网页内容编辑中,CKEditor是一款强大且功能丰富的文本编辑器,它源自FCKeditor的重写,提供了一个灵活、可扩展的API接口。CKEditor的新特性是基于插件的架构,允许用户...

    CKEditor使用介绍

    在本文中,我们将深入探讨CKEditor的使用,包括如何集成到ASP.NET项目中,以及如何利用C#和VS2010进行配置和定制。 一、CKEditor的安装与引入 1. 首先,你需要下载CKEditor的开发包。这通常是一个.zip或.tar.gz...

    CKEditor4.2编辑器和使用指南

    "CKEditor 4 开发人员指南.pdf"这份文档很可能是CKEditor4.2的官方开发指南,内容可能包括安装教程、API参考、插件开发、自定义配置等方面的详细指导。通过阅读这份文档,开发者可以深入理解CKEditor的工作原理,...

    CKEditor 4 开发人员指南(中文)

    CKEditor 4作为一款流行的富文本编辑器,为Web开发者提供了一个易于集成和使用的在线编辑界面。本文将详细介绍CKEditor 4的安装、集成、配置以及定制流程,适用于不同层次的开发人员。 ### 安装CKEditor 4 ...

    CKEditor 4 开发人员指南

    - 在集成CKEditor时,可以将CKEditor的引用文件`ckeditor.js`使用原始文件名或指定不同的文件名,但具体操作前需参考开发人员指南中的`Specifying the Editor Path`部分。 - 如果要将CKEditor合并到其他JavaScript...

    ckeditor5_v19完整版

    `README.md` 文件是项目的说明文档,通常会提供快速入门指南、安装步骤、常见问题等信息,对于初次使用CKEditor5的用户来说,这是一个重要的参考资料。 `sample` 目录可能包含了示例代码或演示页面,让用户能够直观...

    ckeditor 自定义上传图片

    `51aspx源码必读.txt`可能是一份关于如何理解和使用这些源码的指南,而`最新Asp.Net源码下载.url`则可能指向了更多ASP.NET相关的资源。 通过研究这些文件,开发者可以深入理解ckeditor与ASP.NET的交互,学习如何在...

    ckeditor使用示例

    **CKEditor 使用示例** CKEditor 是一个广泛应用于网页开发中的开源富文本编辑器,它提供了所见即所得(WYSIWYG)的编辑体验,让网页内容编辑如同使用桌面文字处理软件一样方便。该编辑器原名为 FCKEditor,后来...

    CKEditor示例源码20121228

    "配置方法存放在docs文件夹下"这一信息提示,开发者可以在docs文件夹内找到关于如何设置和定制CKEditor的详细指南,包括但不限于语言设置、工具栏配置、插件安装等。 "源码是一个示例,欢迎感兴趣的用户下载学习...

    ckeditor5富文本框使用demo.zip

    压缩包内的"readme.md"文件通常包含了项目的说明、安装指南和使用步骤。通过阅读这份文档,你可以了解如何将这个CKEditor 5的demo集成到自己的项目中,包括以下步骤: 1. **安装CKEditor 5**:首先,你需要通过npm...

    CKeditor编辑器

    7. **无障碍性**:CKeditor遵循Web内容无障碍指南(WCAG),使有特殊需求的用户也能方便地使用编辑器。 8. **版本控制**:与版本控制系统如Git集成,CKeditor可以记录内容的历史版本,方便追踪和回滚更改。 9. **...

    ext 中嵌入CKEditor 实现代码

    此外,`ReadMe`系列文件可能是项目说明或安装指南,它们提供了关于如何设置和使用此集成的额外信息。 总的来说,EXTJS与CKEditor的结合提供了构建专业级在线HTML教程编辑器的能力。通过EXTJS的强大组件化能力和...

    ckeditor_4.1.2_standard+ckeditor_aspnet_3.6.4

    此外,CKEditor 4.1.2 强调了无障碍性,遵循了 Web 内容可访问性指南(WCAG),使得有特殊需求的用户也能方便地使用编辑器。 CKEditor ASP.NET 3.6.4 则是 CKEditor 集成到 ASP.NET 平台的一个特定版本,主要服务于...

    CKEditor3.6.2 for java

    CKEditor是一款广泛使用的开源富文本编辑器,专为网页开发者设计,提供强大的文字编辑功能,类似于桌面的文字处理软件。在本资源"CKEditor3.6.2 for java"中,重点是将CKEditor与Java环境集成,特别是针对Eclipse...

    ckeditor控件

    CKEditor的主要特点是界面友好、操作简便,支持多种语言,包括中文,使得全球的开发者都能轻松使用。 CKEditor的核心特性包括: 1. **丰富的文本格式化选项**:支持加粗、斜体、下划线、颜色、字体、字号等基本格式...

    ckeditor_3.6.2.zip

    在使用 CKEditor 时,需要注意XSS(跨站脚本攻击)的风险。为了防止恶意代码注入,开发者需要正确配置过滤和转换规则,以确保用户输入的安全。 6. **社区与支持** CKEditor 拥有一个活跃的开发者社区,提供了丰富...

    ckeditor_4.4.8_standard.zip

    - 这个文件通常包含了关于软件的基本信息、安装指南、许可协议和使用注意事项等内容。在CKEditor的案例中,它会详细解释如何配置和集成编辑器到你的网站中,以及如何开始使用。 4. **ckeditor文件夹**: - 解压缩...

    ckeditor皮肤

    此外,CKEditor还支持自定义皮肤,如果你对Kama皮肤不满意或者想要更个性化的界面,你可以根据CKEditor提供的皮肤开发指南,修改现有的皮肤或创建全新的皮肤。皮肤开发涉及到HTML、CSS和JavaScript的知识,需要理解...

    ckeditor_3.5.2(在线文本编辑器)

    "使用说明.docx"很可能是官方或个人编写的关于如何安装、配置和使用CKEditor的详细指南,包括基本操作、配置参数、问题解决等内容。这个文档对于初学者尤其重要,可以帮助他们快速上手。 而"ckeditor"文件夹则包含...

Global site tag (gtag.js) - Google Analytics