fckeditor编辑器下的自定义分页符实现方法_网页编辑器

进行长文章分页,编辑人员在控制分页符的时候手工插入很麻烦,所以修改了FCK的插入分页符的插入字符:
修改方法:
打开/editor/js/
找到fckeditorcode_gecko.js和fckeditorcode_ie.js
因为fck有二个js文件。fckeditorcode_gecko.js是针对非ie的。一个是针对ie的。所以我们需要更改二个js的文件。
这样方便我们以后插入分页时,就不需要那么一大串的了。
找到:
var FCKPageBreakCommand=function(){this.Name='PageBreak';};FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();var e=FCK.EditorDocument.createElement('Div')
以及其后字符,修改为你自己的分页符即可

fck分页符修改

     FKC默认添加的分页符为:<div style="page-break-after: always"><span style="display: none"> </span></div>

      对文章的分页,我是运用String.split("分页符")方法,将文章以分页符为分割点,返回一个String类型的数组,但是双引号不能够相互嵌套,split()方法中的参数就没办法设置。
      如何修改默认的分页符:

      找到js文件:在/fckeditor/editor/js/目录下,需要修改的有两个js文件:fckeditorcode_ie.js(针对IE浏览器的配置)、fckeditorcode_gecko.js(针对非IE浏览器的配置)。
      在js文件中找到如下代码,并做修改:

  var FCKPageBreakCommand=function()
   {this.Name='PageBreak';};
  FCKPageBreakCommand.prototype.Execute=function()
   {FCKUndo.SaveUndoStep();
  var e=FCK.EditorDocument.createElement('DIV'); //这里是创建<div>标签,此处不用修改
  e.style.pageBreakAfter='always';       //这里是为<div>添加样式,把它删掉;
  e.innerHTML='<span style="DISPLAY:none"> </span>';
//这里是在<div>中添加的内容,修改一下; 我的是修改为e.innerHTML='[jb51page]'; 也就是仅有一个空格;

      保存,重新添加文章,添加文章时看不出变化,保存看查看数据,分页符的位置变为: <div>[jb51page]</div>
      为文章分页就可以用split("<div>[jb51page]</div>")方法进行拆分显示了;

以下是参考了dedecms的方法:
大家在修改的时候一定要看清原来的fckeditor分页的写法,千万不要直接覆盖,容易出问题。

dedecms的方法:

复制代码 代码如下:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
var e=FCK.EditorDocument.createElement('P');e.innerHTML='[jb51page]';

用的方法:

复制代码 代码如下:

var FCKPageBreakCommand=function(){this.Name='PageBreak';};
FCKPageBreakCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();
FCK.EditorDocument.selection.createRange().text='[jb51page]';

注意:由于我们使用的版本,有FCKUndo.SaveUndoStep();如果不带出现了编辑器无法显示的情况。大家根据需要修改。

后面发现了dedecms增加的小功能,里面的函数不错可以参考下

var FCKLineBrCommand=function(){this.Name='LineBr';};
FCKLineBrCommand.prototype.Execute=function(){FCK.EditorDocument.selection.createRange().pasteHTML("<br/>");};
FCKLineBrCommand.prototype.GetState=function(){return 0;}

var FCKQuoteCommand=function(){this.Name='Quote';};
FCKQuoteCommand.prototype.Execute=function(){
	var quoteString = "<table style='border-right: #cccccc 1px dotted; table-layout: fixed; border-top: #cccccc 1px dotted; border-left: #cccccc 1px dotted; border-bottom: #cccccc 1px dotted' cellspacing=0 cellpadding=6 width='95%' align=center border=0>\r\n";
 quoteString += "<tr><td style='word-wrap: break-word' bgcolor='#fdfddf'>\r\n<font color='#FF0000'>以下为引用的内容:</font><br>\r\n";
 quoteString += "</td></tr></table>\r\n";
	FCK.EditorDocument.selection.createRange().pasteHTML(quoteString);
};
FCKQuoteCommand.prototype.GetState=function(){return 0;}

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索fckeditor
分页符
网页编辑器、网页编辑器 爱迪帮、微信网页编辑器、可视化网页编辑器、html网页编辑器,以便于您获取更多的相关知识。

时间: 2024-08-04 13:27:54

fckeditor编辑器下的自定义分页符实现方法_网页编辑器的相关文章

FCKEDITOR 的高级功能和常见问题的解决方法_网页编辑器

它可和PHP.JavaScript.ASP.ASP.NET.ColdFusion.Java.以及ABAP等不同的编程语言相结合.FCK的配置和使用都很简单,但是默认的配置不能满足所有的需求,所以我们需要了解一些FCK的高级功能. 获取FCK的实例 FCKeditorAPI是FCKeditor加载后注册的一个全局对象,利用它我们就可以完成对编辑器的各种操作. 在当前页获得 FCK 编辑器实例: var Editor = FCKeditorAPI.GetInstance('InstanceName'

FCKeditor 网页在线编辑器的使用方法_网页编辑器

它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.ASP.ColdFusion .PHP.Jsp.Active-FoxPro.Lasso.Perl.ython 等编程环境. 官方网站 http://www.fckeditor.net/ 官方文档 http://wiki.fckeditor.net/ 下载地址 http://www.fckeditor.net/download/default.html FCKeditor安装和配置 下载FCKeditor2.63.zip和F

网页编辑器FCKeditor 2.6.4精简配置方法_网页编辑器

上传目录请在fckeditoreditorfilemanagerconnectorsaspconfig.asp中设置 Dim ConfigUserFilesPathConfigUserFilesPath = "/userfiles/" 中文配置说明:因为下载下来的压缩包里面有包含很多在我们使用时,用不到的,不删除也行.看个人喜好下面以PHP为例,进行程序瘦身 删除所有"_"开头的文件和文件夹 删除FCKeditor的目录下: fckeditor.afpfckedit

Js FCKeditor的值获取和修改的代码小结_网页编辑器

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

ThinkPHP中FCKeditor编辑器的使用方法_网页编辑器

而且可以用直接上传和ajax两种方式处理内容.为了给一些还没能成功地集成fckeditor的同侪们一些启发与帮助, 兹将我的经验与体会描述如下:应用目的:将FCKeditor编辑器集成到Thinkphp中,使用户能够在线像编辑Word一样处理即将发表的文字与图像. 应用软件与环境:apache服务器2.0以上版本,PHP版本5.0以上,mysql5.0以上:Thinkphp版本1.5或以上,Fckeditor版本2.x. 应用步骤: 1.下载FCKeditor2.x版本,将解压后的文件夹FCKe

php下FCKeditor2.6.5网页编辑器的使用方法_网页编辑器

1.首先去官网下载FCKeditor2.6.5 多国语言版.http://ckeditor.com/download,注意:第一个为最新3.0.1版,第二个才是FCKeditor 2.6.5 2.删除不必要的东西: 删除/FCKeditor/目录下除fckconfig.js,fckeditor.js,fckstyles.xml,fcktemplates.xml,fckeditor.php,fckeditor_php5.php,fckeditor_php4.php 七个文件以外的所有文件: 删除目

比较不错的修改FCKEditor的修改方法_网页编辑器

修改后的代码下载http://www.cnblogs.com/Files/Truly/FCKeditor_Truly.rar本地下载地址由于项目需要,近期仔细研究了FCKEditor.发现一下bug,以及缺少的一些东西. 一.防止连续文本导致出现滚动条        FCKEditor编辑器使用Iframe来处理编辑器内容,可惜不支持文本换行,假如你连续输入一段英文或数字等,将会出现滚动条,这时我们需要给其增加word-wrap样式为break-word: 添加方式有很多,我选择最便捷的修改方式

Ewebeditor及fckeditork单引号问题的解决方法_网页编辑器

Ewebeditor及fckeditor,90%的网站都是采用这两种编辑器作为产品或者内容的说明部分的编辑窗口,近日,一客户的外贸站点基本上快完工了,因客户产品分类多,故而让客户自己在后台添加产品,但是客户反映,在后台添加产品时,如果产品说明内容太过复杂的话,产品怎么也添加不入数据库中. 当时,我们也好生郁闷,这到底怎么回事,我们亲自测试后台添加任意的产品或者文字都能成功,偏偏他就不行,在网站搜索了相关的如"Ewebeditor 不能添加到数据库",似乎找到了一点答案,因Ewebedi

免费开源百度编辑器(UEditor)使用方法_网页编辑器

UEditor效果图 一.简介 UEditor是一个开源免费的编辑器,由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码. 官方网站:http://ueditor.baidu.com/ 二.下载地址 官方下载:http://ueditor.baidu.com/website/download.html 官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:    _examples:编辑器完整版的