使用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编辑器内容请搜素我们以前的文章或下面相关文章，希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 获取FCKeditor内容

    形式如: 复制代码 代码如下: varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.GetXHTML(true); ************************************************* 利用Javascript取和设FCKeditor值也是非常容易的,如下: 复制代码 代码如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(Editor

  • JS操作Fckeditor的一些常用方法(获取、插入等)

    javascript获取和设置FCKeditor内容 利用Javascript取和设FCKeditor值也是非常容易的,如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } // 获取编辑器中文字内容 function getEditorTextCon

  • js判断FCKeditor内容是否为空的两种形式

    形式1: 复制代码 代码如下: function checkFCK(key) { var oEditor=FCKeditorAPI.GetInstance(key); var content=oEditor.GetXHTML(true); content=content.replace(/ /g,""); content=content.replace(/\s/g,""); content=content.replace(/ /g,""); co

  • Js FCKeditor的值获取和修改的代码小结

    利用Javascript取和设FCKeditor值也是非常容易的,如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } // 获取编辑器中文字内容 function getEditorTextContents(EditorName) { var oEd

  • FCKeditor提供了一个完整的JavaScript API

    FCKeditor offers a complete JavaScript API so you can interact with it once the editor is loaded and running. FCKeditor提供了一个完整的JavaScript API(Application Public Interface),你可以利用这些API来处理FCK编辑器,只要它被加载完成或在正在运行中. Retrieving an editor instanceOnce loaded,

  • FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码

    content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

  • javascript fckeditor编辑器取值与赋值实现代码

    获取编辑器中HTML内容 复制代码 代码如下: function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } 获取编辑器中文字内容 复制代码 代码如下: function getEditorTextContents(EditorName) { var oEditor = FCKeditorAPI.G

  • extjs fckeditor集成代码

    extjs fckeditor集成代码

    复制代码 代码如下: { xtype : "textarea", name : "content", anchor : '97%', height : 400, id : "content", fieldLabel : "内容", listeners : { "render" : function(f) { fckEditor = new FCKeditor("content"); fc

  • JSP 页面中使用FCKeditor控件(js用法)

    它可和PHP.JavaScript.ASP.ASP.NET.ColdFusion.Java.以及ABAP等不同的编程语言相结合."FCKeditor"名称中的"FCK" 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写. FCKeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip.fckedit

  • fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

    content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

  • FCKeditorAPI 手册 js操作获取等

    复制代码 代码如下: function abc() { var checkContent =FCKeditorAPI.GetInstance("editor");//获取实例 alert(checkContent.GetXHTML());//获取当前内容 var newelement = document.createElement("a"); newelement.href="#"; newelement.innerHTML="df&

  • jsp fckeditor 上传中文图片乱码问题的解决方法

    经过我修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,重新生成fckeditor-java-2.3.jar包,要解决所有的乱码问题,有3部要修改1.修改Web容器的字符编码,如果Web容器用的是Tomcat,则修改conf/server.xml文件,在两个Connector中添加"URIEncoding="utf-8"",我这里用的是utf-8编码,所以修改成utf-8,若项目是gb2312编码,则设置为

  • JS集成fckeditor及判断内容是否为空的方法

    本文实例讲述了JS集成fckeditor及判断内容是否为空的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> <!-- // Automatically calculates the editor base path based on the _samples directory. // This is usefull only for these samples. A real application shoul

随机推荐