使用Js获取、插入和更改FCKeditor编辑器里的内容

这篇文章主要介绍了使用Js获取、插入和更改FCKeditor编辑器里的内容,包括JS操作Fckeditor的一些常用方法,需要的朋友可以参考下

之前在一个系统里使用了FCKeditor编辑器,由于项目需求需要在FCKeditor里添加一个自定义的按钮用于实现自己的需求

主要是在点击该按钮时删除或添加FCKeditor编辑器里的内容

其实是一个很简单的需求,本来以为在FCKeditor可以很容易的实现

在Google上搜索自定义按钮,插件开发,经过近二个小时的摸索最终还是没有实现不知是我太笨还是自定义插件太难啦

通过JS方式来处理

1.在页面中添加checkbox元素并绑定事件,选中该元素时将在FCKeditor内容里添加”{#book#}”字符串(该字符串会在适当的时候被替换成其他内容),取消选中时则删除

添加/删除复选框

2.添加Js处理FCKeditor内容(添加或删除”{#book#}”字符串),’txtContent’为FCKeditor的ID控控件ID

//”添加/删除复选框”点击时如果按钮选中则添加”{#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;
}

参考:

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

本文来自脚本之家,原文链接:https://www.jb51.net/article/180847.htm

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/901430.html

(0)
上一篇 2025年1月4日 02:22:22
下一篇 2025年1月4日 02:23:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 美国又出了一个“斯诺登” 偷了50TB的机密情报

    美国国家安全局承包商的一名前任雇员8日被控窃取并私藏大量机密文件,目前面临20项刑事指控。 路透社援引美国政府官员的话报道,这可能是美国历史上规模最大的政府机密失窃事件。 私藏量惊人 涉案男子名为哈罗德·马丁,现年52岁,家住美国马里兰州,…

    编程技术 2025年1月4日
    100
  • Linux系统从零到高手的进阶心得

    初次了解到Linux系统还是在我初中的时候,那时候正是在一个中二年龄,喜欢看小说,对于小说中出现的明显的非现实场景感到十分钦佩、羡慕,并常常幻想自己也有小说主人公那样的本领。那正是在这样一个充满幻想的年纪,我看到了一本关于重生、关于黑客的小…

    编程技术 2025年1月4日
    100
  • 后HTTPS时代:网站身份认证比加密更重要

    HTTPS加密应用在过去两年间取得了惊人成果,全球互联网超50%的网站流量启用HTTPS加密。然而,100%的加密环境,就等于安全吗?借助免费DV SSL证书,越来越多的恶意软件、钓鱼网站转向100%加密,得以逃避安全工具检测、欺骗用户信任…

    编程技术 2025年1月4日
    100
  • 嵌入式培训费贵?华清远见鸡年大促现良机!

    3月8日,小编从国内知名的嵌入式培训机构——华清远见了解到,当前学习智能硬件开发的年轻人越来越多,当然绝大多数人依然选择了捷径,那就是参加相关的技术培训,以短期达到能从事相关的工作,同时实现自己的价值。 但是,想要真正学习这些IT界的热门课…

    编程技术 2025年1月4日
    100
  • 解密:迅雷会员是如何实现高速下载的?

    迅雷凭借强大的下载能力、良好的使用体验以及丰富的服务,成为我们的常用软件,其推出的增值服务“迅雷会员”,也受到很多雷友的欢迎。但很多人估计都不知道,迅雷会员是如何实现高速下载的。今天,小编就跟大家科普一下。 传统下载方式与迅雷下载 传统的下…

    编程技术 2025年1月4日
    100
  • 总结5条对学习Linux系统有帮助的经验心得

    在学习Linux的开始阶段,我跟大家一样因为没有一点基础,学起来有点吃力,当对Linux有了一定的认知,你就会不断调整你的学习方式方法。并且在学习Linux的时候,记得放下您之前的思维,带着一个“无知”的学习态度去接触Linux,不妨是个很…

    编程技术 2025年1月4日
    100
  • 【SSL证书】HTTP被打压,HTTPS将逆袭

    近日,Firefox 52发布,Firefox 52中仍然坚持以往的态度,打压不安全的HTTP页面,而这次Mozilla带给用户的是HTTP的不安全登陆表单,在任何HTTP页面中,一个全新的“不安全密码警告”将会在用户点击表单时,直接出现在…

    编程技术 2025年1月4日
    100
  • 400余份阿里珍贵技术资料限时免费下载(持续更新中)

    2017年,你是否有一个小目标,打算在新的一年事业更上一层楼、代码写的更优美、对互联网生态拥有更多宏观的战略性了解? 小编精心挑选2016云栖大会、历届在线技术峰会、云栖技术直播核心资料,只把最好的呈现给你!因为资料集合过于庞大,所以分批放…

    编程技术 2025年1月4日
    100
  • DWG文件怎么打开 DWG文件查看器最新版下载

    DWG是我们常用的一种图纸格式,如今DWG文件广泛的应用于各个领域。DWG文件怎么打开?不少小伙伴可能刚接触DWG文件,因此不知道如何打开DWG文件。通过这篇文章,小编就来给大家介绍下简单的DWG文件打开方法以及DWG文件查看器最新版下载。…

    编程技术 2025年1月4日
    100
  • web技术栈中不可或缺的Linux技术

    随着第三次信息浪潮的冲击,web技术在近年来可谓发生了天翻地覆的变革。从单向信息的web1.0时代,逐步过渡到信息和人交互的web2.0再到数据主动与人*的web3.0时代,这些成就无疑归功于Web技术的迅速发展。 Web技术最重要的载体便…

    编程技术 2025年1月4日
    100

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信