向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 表单进行客户端验证demo
Aug 24 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 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
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Node.js的Express框架使用上手指南
2016/03/12 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python发送告警邮件脚本
2018/09/17 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
企业出纳岗位职责
2014/03/12 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
董事长岗位职责
2015/02/13 职场文书
公司辞职信模板
2015/05/13 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js