CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。其开源协议是基于 GPL, LGPL 和 MPL 的。官方网站:http://ckeditor.com/
一 般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号、换行等的干扰,只有先读入到 textarea 最方便。
使 用 CKeditor 3.0.1
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="http://banu.blog.163.com/blog/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="http://banu.blog.163.com/blog/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=...>");
相关推荐
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert(“内容不能...
在这个包中,包含了原来的代码,当时这里调用了CKEditor api中的js函数,从而解决了CKEditor的项目路径问题,在CKEditor的自定义标签中不支持表达式,所以不能使用项目路径,所以需要使用js代码解决
需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件...
ckEditor在jsp中的使用zckEditor在jsp中的使用
把ckeditor 3.4的ckeditor.js复盖就行
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> 如果是ASP.NET环境,也可用服务器端控件 <asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"> 注意...
CKEDITOR实现新闻内容富文本显示以及添加修改,文档为前台实现ckeditor的代码。
ckeditor4 视频插件html5-video功能增强,添加中文显示,新增添加封面的功能。内有用法示例,请丢在服务器里预览效果。
CKEditor是新一代的FCKeditor,是一个重新开发的版本,CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor 4.10.1 中文版 更新日志:2018-11-01已修复问题...
CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。 但是,实际上,...
ckeditor
jsp中使用ckeditor需要的jar包,js以及本人成功使用步骤
extjs中嵌入ckeditor的完整实例,同时有ckeditor的配置说明
在ckeditor 4.1两端对齐按钮插件中加入text-justify:inter-ideograph,以支持中文两端对齐显示。
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。不用多介绍 全中文说明 英文不好的同学有福了
CKEditor示例源码 源码描述: CKEditor示例源码 在.net中加入CKEditor编辑器在编写内容, 里面有配置方法存放在docs文件夹下 源码是一个示例,欢迎感兴趣的用户下载学习
之前在网上下载的都不可以用,于是想尽办法发现是网上提供的是不支持最新的ckeditor.用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config....
直接在ckeditor的按钮中显示文件浏览按钮,点击后打开文件浏览窗口,上传或管理文件(必须安装.../ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个skin里,例如 ckeditor/skins/v2/file.gif
ckeditor5_v19完整版,可直接放在网站根目下使用,工具齐全,注意ckfinder请自行下载并放在网站根目录下。