向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 相关文章推荐
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
js操作二进制数据方法
Mar 03 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python的迭代器和生成器
2015/07/29 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python模拟斗地主发牌
2020/04/22 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
医院护士专业个人的求职信
2013/12/09 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android