这篇文章主要介绍了使用Js获取、插入和更改FCKeditor编辑器里的内容,包括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() ; 
}

到此这篇关于使用Js获取、插入和更改FCKeditor编辑器里的内容的文章就介绍到这了,更多相关Js操作FCKeditor编辑器内容请搜素爱安网以前的文章或下面相关文章,希望大家以后多多支持爱安网!

    无相关信息
最新资讯
爱奇艺涨价的硬气与软肋

爱奇艺涨价的硬气与软

最近,扛了八年“价格战”的爱奇艺,终于对会员涨价了,连续
欧盟计划提高锂电池产量 2025年实现自给自足

欧盟计划提高锂电池产

据报道,欧盟委员会副主席马罗斯·塞夫科维奇(Maros Sefc
蚂蚁旗下网络小贷公司200亿元ABS融资项目获上交所通过

蚂蚁旗下网络小贷公司

暂缓上市后,蚂蚁集团旗下网络小贷公司的ABS融资项目顺
小米ADR倒跌4.77% 第三季度营收、净利润均创单季历史新高

小米ADR倒跌4.77% 第

小米集团ADR倒跌4.77%,第三季度营收、经调整净利润均创
小米高管解读三季度财报:正积极进行金融科技业务的风险控制

小米高管解读三季度财

小米集团CFO兼集团副总裁林世伟表示,三季度营收增长放
在线教育风口正劲 各路资本加持下半场如何突围

在线教育风口正劲 各

疫情下在线教育业务迅速发展,成为2020年资本市场追逐的
最新文章
js获取富文本中的第一张图片(正则表达式)

js获取富文本中的第一

这篇文章主要介绍了js获取富文本中的第一张图片url正
js获取UEditor富文本编辑器中的图片地址

js获取UEditor富文本

这篇文章主要介绍了js获取UEditor富文本编辑器中的图
自动刷新从BrowserSync开始

自动刷新从BrowserSyn

Browsersync能让浏览器实时、快速响应您的文件更改(htm
详解React中的todo-list

详解React中的todo-li

这篇文章主要介绍了React中的todo-list的相关知识,非常
使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器

使用 CodeMirror 打造

写这个的目的是因为之前项目里用到过 CodeMirror,觉得
百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使

今天笔者就给大家推荐一款百度UEditor编辑器。关于这