向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代码加载优化方法
Jan 30 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
简单使用Python自动生成文章
2014/12/25 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
英文留学推荐信范文
2014/01/25 职场文书
质量承诺书范文
2014/03/27 职场文书
青年志愿者活动总结
2014/04/26 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
防震减灾主题班会
2015/08/14 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书