向fckeditor编辑器插入指定代码的方法

 更新时间:2007年05月25日 00:00:00   投稿:mdxy-dxy  
这篇文章主要向大家分享如何在fckeditor编辑器插入代码操作,这里脚本之家小编就为大家分享一下啊

核心代码

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()  ; 
}

有了这些函数,剩下的就大家自行发挥了

相关文章

  • Highcharts使用简例及异步动态读取数据

    Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧
    2015-12-12
  • JavaScript设置弹出式独立窗口页面和window的方法举例详解

    JavaScript设置弹出式独立窗口页面和window的方法举例详解

    window.open是网页中经常遇到的弹出窗口代码,不是网络中比较反感的那类弹出代码,下面这篇文章主要给大家介绍了关于JavaScript设置弹出式独立窗口页面和window的方法,需要的朋友可以参考下
    2024-01-01
  • axios拦截器机制的实现原理详解

    axios拦截器机制的实现原理详解

    axios 不仅提供了一套跨平台请求,另外还提供了“拦截器”这一中间件机制,方便你在请求之前、响应之后做些操作处理,本文给大家详细介绍了axios 拦截器机制是如何实现的,需要的朋友可以参考下
    2024-05-05
  • JS 页面自动加载函数(兼容多浏览器)

    JS 页面自动加载函数(兼容多浏览器)

    兼容多个浏览器的自动加载函数。
    2009-05-05
  • 浅谈webpack组织模块的原理

    浅谈webpack组织模块的原理

    这篇文章主要介绍了浅谈webpack组织模块的原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    使用html+js+css 实现页面轮播图效果(实例讲解)

    下面小编就为大家带来一篇使用html+js+css 实现页面轮播图效果(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解如何在在浏览器中使用WebRTC获取用户IP地址

    详解如何在在浏览器中使用WebRTC获取用户IP地址

    如果需要在程序中获取当前用户的IP,通常手段都是需要使用服务器,但现在借助WebRTC的强大功能,我们可以直接在浏览器客户端获取用户IP,所以本文小编将给大家介绍一下如何在在浏览器中使用WebRTC获取用户IP地址,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-11-11
  • javascript轻量级模板引擎juicer使用指南

    javascript轻量级模板引擎juicer使用指南

    Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。
    2014-06-06
  • JavaScript实现的石头剪刀布游戏源码分享

    JavaScript实现的石头剪刀布游戏源码分享

    这篇文章主要介绍了JavaScript实现的石头剪刀布游戏源码分享,挺好玩的小游戏,关键在一些算法上,需要的朋友可以参考下
    2014-08-08
  • JS比较两个数值的大小实例

    JS比较两个数值的大小实例

    下面小编就为大家带来一篇JS比较两个数值的大小实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论