• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Hing
沉浸在技术的海洋,通过学习与讨论,只有不断的提高,才有可能去创造与实现.
博客园    首页    新随笔    联系   管理    订阅  订阅
CKEditor使用方法记录一(简单的操作)

  只是记录了简单的使用、获取数据、设置数据

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

使用 CKeditor 3.0.1(在母版中(服务端控件)用时ID值可以  CKEDITOR.replace('<%=content.ClientID.Replace("_","$") %>') )来设置

代码
<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>

或者通过样式来设置:      <textarea id="tracontent" cols="0" rows="0" class="ckeditor"></textarea>

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("Pacer"); // content 就是前面 CKEDITOR.replace 的第一个参数值(也就是textarea 的ID值)

或

var editor = CKEDITOR.replace("content");
editor.setData("Pacer");

 

获取值

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

或

var editor = CKEDITOR.replace("content");
alert(editor.getData());

 

插入图片

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

CKEDITOR.instances.content.insertHtml("<img src=...>");
posted on 2010-01-08 10:53  Pacer  阅读(24172)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3