向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 Serializer序列化时间处理示例
Jul 31 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
收集前端面试题之url、href、src
2018/03/22 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
微信小程序实现点赞业务
2021/02/10 Javascript
Python版微信红包分配算法
2015/05/04 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
wxPython实现分隔窗口
2019/11/19 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python字符串及文本模式方法详解
2020/09/10 Python
PHP面试题大全
2015/10/16 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
实习自荐信
2013/10/13 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
分公司负责人任命书
2014/06/04 职场文书
公司感谢信范文
2015/01/22 职场文书
内勤岗位职责
2015/02/10 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python