向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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
Vue3为什么这么快
2020/09/23 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
python中的函数用法入门教程
2014/09/02 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python实现图书借阅系统
2019/02/20 Python
Python中print函数简单使用总结
2019/08/05 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
高三英语复习计划
2015/01/19 职场文书