向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 相关文章推荐
AngularJS 路由详解和简单实例
Jul 28 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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的配置文件php.ini
2006/10/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
浅谈javascript错误处理
2019/08/11 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python实现自动登录
2018/09/17 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
养生餐厅创业计划书范文
2014/03/26 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
党支部四风整改方案
2014/10/25 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书