向fckeditor编辑器插入指定代码的方法


Posted in Javascript onMay 25, 2007

核心代码

function insertHTMLToEditor(obj) 
{ 
   var oEditor = FCKeditorAPI.GetInstance("content"); 
   if(oEditor.EditMode == FCK_EDITMODE_WYSIWYG) 
   { 
       oEditor.InsertHtml(obj) 
   } 
   else 
   { 
       return false; 
   } 
}

使用Js获取和更改FCKeditor编辑器里的内容

之前在一个系统里使用了FCKeditor编辑器,由于项目需求需要在FCKeditor里添加一个自定义的按钮用于实现自己的需求

主要是在点击该按钮时删除或添加FCKeditor编辑器里的内容

其实是一个很简单的需求,本来以为在FCKeditor可以很容易的实现

在Google上搜索自定义按钮,插件开发,经过近二个小时的摸索最终还是没有实现不知是我太笨还是自定义插件太难啦

无奈只能通过JS方式来处理

1.在页面中添加checkbox元素并绑定事件,选中该元素时将在FCKeditor内容里添加"{#book#}"字符串(该字符串会在适当的时候被替换成其他内容),取消选中时则删除

<label><input type="checkbox" id="lineBook" onclick="chk_but();"/>添加/删除复选框</label>

2.添加Js处理FCKeditor内容(添加或删除"{#book#}"字符串),'txtContent'为FCKeditor的ID控控件ID

<script type = "text/javascript" >
//"添加/删除复选框"点击时如果按钮选中则添加"{#book#}"字符串到FCK内容里,反之删除字符串
//lineBook为FCK的ID号
function chk_but() {
  if (window.FCKeditorAPI !== undefined && FCKeditorAPI.GetInstance('txtContent') !== undefined) {
    if (document.getElementById('lineBook').checked) {
      FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML += "{#book#}";
    } else {
      FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML = FCKeditorAPI.GetInstance('txtContent').EditorDocument.body.innerHTML.replace("{#book#}", "");
    }
  }
} //end function chk_lineBook()
//内容里如果有{#book#}则选中"添加/删除复选框"
if (document.getElementById('txtContent').value.indexOf('{#book#}') >= 0 
  && window.FCKeditorAPI !== undefined 
  && FCKeditorAPI.GetInstance('txtContent') !== undefined) {
  document.getElementById('lineBook').checked = true;
} 
</script>

参考:

官网:http://ckeditor.com/

获取或更改内容值:http://bbs.csdn.net/topics/360086762

创建插件:http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins

JS操作Fckeditor的一些常用方法

//向编辑器插入指定代码 
function insertHTMLToEditor(codeStr){ 
 var oEditor = FCKeditorAPI.GetInstance("content");
 oEditor.InsertHtml(codeStr); // "html"为HTML文本
}
//获取编辑器中HTML内容
function getEditorHTMLContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.GetXHTML(false));
}
// 获取编辑器中文字内容
function getEditorTextContents() {
 var oEditor = FCKeditorAPI.GetInstance("content");
 return(oEditor.EditorDocument.body.innerText);
}
// 设置编辑器中内容
function SetEditorContents(ContentStr) {
 var oEditor = FCKeditorAPI.GetInstance("content") ;
 oEditor.SetHTML(ContentStr) ;
}
//向编辑器插入指定代码 
function  insertHTMLToEditor(codeStr){ 
    var  oEditor  =  FCKeditorAPI.GetInstance( "content "); 
    if  (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){ 
       oEditor.InsertHtml(codeStr); 
    }else{ 
       return  false; 
    } 
} 
//统计编辑器中内容的字数 
function  getLength(){ 
    var  oEditor  =  FCKeditorAPI.GetInstance( "content "); 
    var  oDOM  =  oEditor.EditorDocument; 
    var  iLength  ; 
    if(document.all){ 
       iLength  =  oDOM.body.innerText.length; 
    }else{ 
       var  r  =  oDOM.createRange(); 
       r.selectNodeContents(oDOM.body); 
       iLength  =  r.toString().length; 
    } 
    alert(iLength); 
} 
//执行指定动作 
function  ExecuteCommand(commandName){ 
    var  oEditor  =  FCKeditorAPI.GetInstance( "content ")  ; 
    oEditor.Commands.GetCommand(commandName).Execute()  ; 
}

有了这些函数,剩下的就大家自行发挥了

Javascript 相关文章推荐
javaScript中Math()函数注意事项
Jun 18 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JavaScript中的继承之类继承
May 01 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
用Javscript实现表单复选框的全选功能
May 25 #Javascript
更正确的asp冒泡排序
May 24 #Javascript
asp 的 分词实现代码
May 24 #Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 #Javascript
不用MOUSEMOVE也能滑动啊
May 23 #Javascript
一个用js实现的页内搜索代码
May 23 #Javascript
一个js实现的所谓的滑动门
May 23 #Javascript
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python端口扫描简单程序
2016/11/10 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python实现多张图片拼接成大图
2019/01/15 Python
Django实现学生管理系统
2019/02/26 Python
Python 如何实现访问者模式
2020/07/28 Python
python em算法的实现
2020/10/03 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
大专生毕业的自我评价
2014/02/06 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
怎样写观后感
2015/06/19 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL