向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淡入淡出效果的实现思路
Mar 31 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
Vue3.0的优化总结
Oct 16 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
什么是短波收听SWL
2021/03/01 无线电
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python机器学习实战之树回归详解
2017/12/20 Python
python读取Excel实例详解
2018/08/17 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python制作简单五子棋游戏
2019/06/18 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
学生意外伤害赔偿协议书
2014/09/17 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android