向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函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
prototype.js常用函数详解
Jun 18 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
TypeScript 内置高级类型编程示例
Sep 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python逆向入门教程
2018/01/15 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python反转列表的三种方式解析
2019/11/08 Python
numpy库reshape用法详解
2020/04/19 Python
python如何快速生成时间戳
2020/07/21 Python
python 实现逻辑回归
2020/12/30 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
python实现简单聊天功能
2021/07/07 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
python代码实现备忘录案例讲解
2021/07/26 Python
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers