FCKeditor add custom button _ PHP Tutorial

Source: Internet
Author: User
FCKeditor add custom button. Fckconfig in the FCKeditor directory. open js and find FCKConfig. toolbarSets [Default] The setting here is the configuration function button. you need to leave it, you can delete it if you don't need it, or you can also find the fckconfig in the FCKeditor directory. open js and find FCKConfig. toolbarSets ["Default"] The settings here are the configuration function buttons. you can delete or comment out unnecessary settings.

If you need multiple configurations, you can set multiple FCKConfig. ToolbarSets ["your own name. When referencing the editor, take PHP as an example: copy fckeditor. php and name it fckeditor1.php. you can change the configuration here. ($ This-> ToolbarSet = 'your own name name ';)

The code is as follows:


Include ("editor/fckeditor1.php"); // calls
$ OFCKeditor = new FCKeditor ('formcontent'); // instantiate
$ OFCKeditor-> BasePath = 'editor/'; // The path must be the same as the introduced path above. Otherwise, an error is returned: the fckeditor.html page cannot be found.
// $ OFCKeditor-> Value = '';
$ OFCKeditor-> Width = '000000 ';
$ OFCKeditor-> Height = '20140901 ';
$ OFCKeditor-> Create ();
?>



The following is a supplement from other netizens. for details, refer to the following:
FCKeditor is a very popular WEB Visual Editor. its program has a high degree of maturity and rich functions, but it cannot fully meet our actual requirements, sometimes we still need to add some of our own features. However, the program structure of FCKeditor is still complicated. it is difficult for people who are not familiar with JS to flexibly customize it, this article introduces how to add a custom button for opening my photo album to the FCKeditor toolbar.

First look at the effect:

The Add button consists of the following steps:

1. add an image for the button:
All button images of FCK are stored in one image file, which is unique. files are stored in the corresponding skin Directory, such as/FCK/skins/silever/fck_strip.gif. Open the file through Fireworks or Phtoshop and you will find a very long image containing all the buttons. now you can add a custom button at the bottom of the image. note, the size of each button is 16*16 PX.

2. add the function code for the button:
To add a button, you need to modify two core files in the FCK/editor/js Directory: fckeditorcode_gecko.js and fckeditorcode_ie.js. The former is a gecko core browser, such as Firefox, the latter is used in IE-centered browsers such as MyIE (Aoyou). These two files are basically similar, with only minor differences. we don't have to worry about them here.
The modification method is very simple. it is basically a process of painting. First, we find a button that is similar to the button function we will add. Here we select Newpage, this is a button to clear the editor for creating a new file. First, modify fckeditorcode_ie.js and fckeditorcode_gecko.js to directly copy the changed code.

Open fckeditorcode_ie.js. it should be noted that fckeditorcode_ie.js is code optimized by merging multiple files (that is, most of the line breaks, spaces, and comments are removed), which is not easy to read, in addition, when over one hundred k js files are opened with tools such as Dreamweaver and ZDE, the CPU immediately increases to 100%. I believe the computer will become Dementia. after a comparison, golive, which I once thought was worthless, can easily open the file and edit it quickly! No matter what software you use, you can open and edit it. Search by Keyword Newpage, you will find that the function definition of a button is divided into three parts:

A. functional prototype
// Button function prototype
Var FCKNewPageCommand = function () {this. Name = 'newpage ';};
FCKNewPageCommand. prototype. Execute = function () {FCKUndo. SaveUndoStep (); FCK. SetHTML (''); FCKUndo. Typing = true ;};
FCKNewPageCommand. prototype. GetState = function () {return FCK_TRISTATE_OFF ;};

Var FCKMyAlbumCommand = function () {this. Name = 'display: none ';};
FCKMyAlbumCommand. prototype. execute = function () {if (typeof (parent. showMyAlbum) = "function") {parent. showMyAlbum (FCK);} else {alert (FCKLang. noAlbum );}};
FCKMyAlbumCommand. prototype. GetState = function () {return FCK_TRISTATE_OFF ;};

B. function instantiation
Case 'newpage': B = new FCKNewPageCommand (); break;
Case 'myalbum ': B = new FCKMyAlbumCommand (); break;

C. button display
Case 'newpage': B = new FCKToolbarButton ('newpage', FCKLang. NewPage, null, null, true, null, 4); break;
Case 'myalbum ': B = new FCKToolbarButton ('myalbum', FCKLang. MyAlbum, null, null, true, null, 67); break;

The first part of the above code is the original Newpage code, and the last part is our custom code. you should understand what is going on, right? Only the red part and the name are different! The red part is our custom function.
FCKLang is a language pack object. you only need to open the corresponding language pack in FCK/editor/lang/and add the corresponding name attribute. for example, MyAlbum can open my album. Case Sensitive! So far, our adding work has been completed.

Configure "Default"] The settings here are the configuration function buttons. you need to leave them. if you do not need them, you can delete them or...

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.