Custom page break implementation under the FCKeditor Editor _ Web page Editor

Source: Internet
Author: User

Cloud habitat here Small series of reference to a few articles for everyone to tidy up, the use of friends more support.

For long article paging, the editor manually inserts when controlling page breaks, so the insertion character for the FCK Insert page break has been modified:
To modify the method:
Open/editor/js/
Find Fckeditorcode_gecko.js and Fckeditorcode_ie.js.
Because FCK has two JS files. Fckeditorcode_gecko.js is for non ie. One is for IE. So we need to change two JS files.
So it's convenient for us to insert pagination later, so we don't need a whole bunch of them.
Found it:
var fckpagebreakcommand=function () {this. Name= ' PageBreak '; Fckpagebreakcommand.prototype.execute=function () {fckundo.saveundostep (); var e=fck. Editordocument.createelement (' Div ')
With and after the character, modify it to your own page break

FCK Page Break Modification

FKC page breaks that are added by default are: <div style= "page-break-after:always" ><span style= "Display:none" > </span></div >

On the pagination of the article, I use the string.split ("Page Break") method, the article is divided into a page break point, return a string type of array, but double quotes can not nest each other, the split () method of the parameters can not be set.
How to modify the default page breaks:

Find JS file: In the/fckeditor/editor/js/directory, you need to modify the two JS files: fckeditorcode_ie.js (for IE browser configuration), Fckeditorcode_gecko.js ( Configuration for non-IE browsers).
In the JS file to find the following code, and make changes:

  var fckpagebreakcommand=function () 
   {this. Name= ' PageBreak '; 
  Fckpagebreakcommand.prototype.execute=function () 
   {fckundo.saveundostep (); 
  var e=fck. Editordocument.createelement (' DIV '); Here is the creation <div> tag, where you do not need to modify 
  e.style.pagebreakafter= ' always ';       Here is the <div> add style, delete it; 
  e.innerhtml= ' <span style= ' display:none ' > </span> '; 
Here is the content added in <div>, modify it; Mine is modified for e.innerhtml= ' [jb51page] '; That is, there is only one space;

Save, re-add articles, add articles do not see changes, save see View data, page break position becomes: <div>[jb51page]</div>
For the article pagination can be split ("<div>[jb51page]</div>") method of splitting display;

The following is a reference to the Dedecms method:
Everyone in the revision time must see the original FCKeditor page of the writing, do not directly cover, easy to problem.

The Dedecms method:

Copy Code code as follows:

var fckpagebreakcommand=function () {this. Name= ' PageBreak ';
Fckpagebreakcommand.prototype.execute=function () {fckundo.saveundostep ();
var e=fck. Editordocument.createelement (' P '); e.innerhtml= ' [Jb51page] ';

Methods used by cloud-dwelling communities:

Copy Code code as follows:

var fckpagebreakcommand=function () {this. Name= ' PageBreak ';
Fckpagebreakcommand.prototype.execute=function () {fckundo.saveundostep ();
FCK. EditorDocument.selection.createRange (). text= ' [jb51page] ';

Note: Because of the version we are using, there is a fckundo.saveundostep (), and if the editor cannot display without appearing. We need to revise them as needed.

Later found Dedecms added small function, inside the function is good can refer to the following

 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= ' Align=center border=0>\r\n '; Quotestring + + <tr><td style= ' Word-wrap:break-word ' bgcolor= ' #fdfddf ' >\r\n<font color= ' #FF0000 ' >
 The following is the content of the reference: </font><br>\r\n ";
	Quotestring + = "</td></tr></table>\r\n"; FCK.
EditorDocument.selection.createRange (). pastehtml (quotestring);
}; 
Fckquotecommand.prototype.getstate=function () {return 0;} 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.