向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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python基础教程之序列详解
2014/08/29 Python
Python中GIL的使用详解
2018/10/03 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python中几种自动微分库解析
2019/08/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
团代会闭幕词
2015/01/28 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
同事欢送会致辞
2015/07/31 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
Python中else的三种使用场景
2021/06/16 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫