CKEditor/FCKEditor的使用

因为直接把内容作为字符串给编辑器的 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=...>");

转载于:https://www.cnblogs.com/ikei/p/7094660.html

CKEditor/FCKEditor的使用相关推荐

ckeditor 4.2.1_演示 ckeditor 上传插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
ckeditor 4 上传和插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
web 富文本编辑器总结
前言富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器产地稳定 ...
web富文本编辑器的选择のxheditor
最近在研究web富文本编辑器,处理知道的 1.老牌fckeditor 网址:http://ckeditor.com/ 2.百度退出的ueditor 网址:http://uedito ...
java中工具插件列表
1.FCKEditor,现在CKEditor FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用 JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特 ...
分享25个JSP源码，总有一款适合您
链接:https://pan.baidu.com/s/17ug7A_b2nHgu-x1K-GIVlQ?pwd=6367 提取码:6367 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放 ...
文件上传基础及过滤方式
文件上传基础 uploadlabs 利用思路: 常规类: 扫描获取上传会员中心上传后台系统上传各种途径上传 CMS类: 已知CMS源码编辑器类: ckeditor fckeditor kind ...
0916文件上传-基础及过滤方式
文件上传的利用思路常规类扫描获取上传会员中心上传后台系统上传各种途径上传 cms类已知cms源码编辑器类编辑器:文件上传的代码可能是自己写的,也可能是直接用编辑器编写的 ckedito ...
FCKeditor如何升级CKEditor及使用方法
之前编辑器用的是FCKeditor,因为项目原因需要升级为最新版本4.2.2,发现是已经更名为CKEditor. 百度了一下,据官方的解释,CK是对FCK的代码的完全重写. 项目环境是asp.net的 ...

CKEditor/FCKEditor的使用

CKEditor/FCKEditor的使用相关推荐

最新文章

热门文章