向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 ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Vuex 入门教程
Jan 10 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
Vue SSR 组件加载问题
May 02 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的access操作类
2008/04/09 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
实践Vim配置python开发环境
2018/07/02 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
客户接待方案
2014/02/26 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
高中运动会广播稿
2015/08/19 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL