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

来源:脚本之家  责任编辑:小易  

利用Javascript取和设FCKeditor值也是非常容易的,如下:/获取编辑器中HTML内容function getEditorHTMLContents(EditorName){?var oEditor=FCKeditorAPI.GetInstance(EditorName);return(oEditor.GetXHTML(true));}/获取编辑器中文字内容function getEditorTextContents(EditorName){?var oEditor=FCKeditorAPI.GetInstance(EditorName);return(oEditor.EditorDocument.body.innerText);}/设置编辑器中内容function SetEditorContents(EditorName,ContentStr){?var oEditor=FCKeditorAPI.GetInstance(EditorName);oEditor.SetHTML(ContentStr);}你在ppc一搜就有了,上面这个www.zgxue.com防采集请勿采集本网。

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

使用JAVASCRIPT版的FCK,在页面加载时(未打开FCK),创建一个隐藏的TextArea域,这个TextArea的name和ID要和创建的FCK实例名称一致,然后点击"Open Editor"按钮时,通过调用一段函数,使用FCK的ReplaceTextarea()方法来创建FCKeditor,代码如下

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

先引用FCK的主JS文件.. 运用FCK API中的函数操作编辑器 var getFckText = function() { var oEditor = FCKeditorAPI.GetInstance('fckHtmlEditor'); //获取页面中的FCK对象 return oEditor.GetXHTML(true); };//获取编辑器中的内容.. 这样就可以

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

1、去htt p:/ /ww w.aspprogra m.c n/soft.asp?id=38这个地址下载fckeditor在线编辑器(请先杀毒,后使用) 2、fckeditor配置 a、为了使用根目录,我们将IIS的默认网站设置为站点,指向fckeditor(这个可改名)所在的目录。 b、现在建立一个asp文

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

fck编辑器吗,它有自己定义的js的获取方式 //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } 可以找找相关资料看看

通过JS方式来处理

个人选择的 FCKEditor; kindeditor 对表格支持的不好,eWebEditor没接触过。

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编辑器内容请搜素真格学网以前的文章或下面相关文章,希望大家以后多多支持真格学网!

简单来说:设置fckconfig.jsFCKConfig.EditorAreaCSS='/editor/mycss.css';mycss.cssbody { font:12px Arial,Helvetica,sans-serif;line-height:2em;}body*{ line-height:2em;font-size:1.2em;}当然最好是设置fckconfig.jsFCKConfig.CustomConfigurationsPath='./myfckconfig.js';然后将自定义的一些设置全部放在myfckconfig.js里面,方便升级时使用。建议使用ckeditor,fckeditor的完全重构版本,加载速度增加不少内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js操作fckeditor的一些常用方法(获取、插入等)
  • js集成fckeditor及判断内容是否为空的方法
  • js判断fckeditor内容是否为空的两种形式
  • fckeditorapi 手册 js操作获取等
  • fckeditor常用js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码
  • js fckeditor的值获取和修改的代码小结
  • javascript fckeditor编辑器取值与赋值实现代码
  • fckeditor常用js代码,获取fck内容,统计fck字数,向fck写入指定代码
  • fckeditor提供了一个完整的javascript api
  • javascript 获取fckeditor内容
  • extjs fckeditor集成代码
  • jsp 页面中使用fckeditor控件(js用法)
  • jsp fckeditor 上传中文图片乱码问题的解决方法
  • 解密fckeditor 2.0 的设置.修改.使用方法
  • 让谷歌浏览器google chrome支持ewebeditor的方法
  • 基于开发中使用ueditor编辑器的注意事项详解
  • fckeditor添加自定义按钮的方法
  • fckeditor常用js代码,获取fck内容,统计fck字数,向fck写入指定代码
  • 百度ueditor修改右下角统计字数包含html样式
  • 让ie8和ie9支持ewebeditor在线编辑器的方法
  • fckeditor的几点修改小结
  • 网页编辑器fckeditor 2.6.4精简配置方法
  • php中ckeditor和ckfinder配置问题小结
  • FCKeditor编辑器怎么使编辑器里面的内容和前台页面...
  • 用js调用fckeditor,在编辑时如何得到fck的内容 - ...
  • 如何把FckEditor编辑器里面上传的文件值赋给编辑器...
  • 怎么用Javascript控制fckeditor编辑框里的内容?
  • 怎么用Javascript控制fckeditor编辑框里的内容(AS...
  • 怎么在前台获取fck编辑器输入的内容
  • 如何使用fckeditor在线编辑器
  • js 如何获取编辑器的值
  • 用什么样的Web编辑器,eWebEditor,kindeditor还是...
  • fckeditor可视化编辑器,有和php兼容的版本吗?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页网页编辑器js操作fckeditor的一些常用方法(获取、插入等)js集成fckeditor及判断内容是否为空的方法js判断fckeditor内容是否为空的两种形式fckeditorapi 手册 js操作获取等fckeditor常用js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码js fckeditor的值获取和修改的代码小结javascript fckeditor编辑器取值与赋值实现代码fckeditor常用js代码,获取fck内容,统计fck字数,向fck写入指定代码fckeditor提供了一个完整的javascript apijavascript 获取fckeditor内容extjs fckeditor集成代码jsp 页面中使用fckeditor控件(js用法)jsp fckeditor 上传中文图片乱码问题的解决方法解密fckeditor 2.0 的设置.修改.使用方法让谷歌浏览器google chrome支持ewebeditor的方法基于开发中使用ueditor编辑器的注意事项详解fckeditor添加自定义按钮的方法fckeditor常用js代码,获取fck内容,统计fck字数,向fck写入指定代码百度ueditor修改右下角统计字数包含html样式让ie8和ie9支持ewebeditor在线编辑器的方法fckeditor的几点修改小结网页编辑器fckeditor 2.6.4精简配置方法php中ckeditor和ckfinder配置问题小结19款javascript富文本网页编辑器免费开源百度编辑器(ueditor)使用ewebeditor 辑器按钮失效 ie8下eckeditor/fckeditor 使用 ckedit彻底解决ewebeditor网站后台不能解决fckeditor在ie10、ie11下的不javascript 在线文本编辑器实现代asp.net+fckeditor上传图片显示叉修改fckeditor的文件上传功能步骤页面嵌入windows media player播新浪博客在线编辑器傻瓜调用版(2007.11.xheditor的异步载入实现代码一款支持插入表情的编辑器实现代码(简单思ie8 fckedit2.6.x不兼容fckeditor在ie9中无法弹出对话框的解决方jsp fckeditor 上传中文图片乱码问题的解免费开源百度编辑器(ueditor)使用方法jsp ewebeditor使用说明ckeditor 附插入代码的插件xheditor所见即所得文本编辑器(代码高亮显
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved