Add custom button to FCKeditor_PHP tutorial-PHP Tutorial-php.cn

Add custom button to FCKeditor_PHP tutorial

WBOY

Release： 2016-07-21 15:53:11

Original

926 people have browsed it

Open fckconfig.js in the FCKeditor directory and find FCKConfig.ToolbarSets["Default"] The settings here are for configuring function buttons. Leave what you need and delete or comment out what you don’t need.

If you need multiple configurations, you can set multiple FCKConfig.ToolbarSets["Name your own name"] followed by the configuration details. When referring to the editor, take PHP as an example: copy fckeditor.php and name it fckeditor1.php, where you can change the configuration. ($this->ToolbarSet= 'Name of your own name' ;)

Copy code The code is as follows:

 include("editor/fckeditor1.php") ;//Call here
$oFCKeditor = new FCKeditor('FormContent') ;//Instantiate
$oFCKeditor->BasePath = 'editor/';//This path must be consistent with the above import path, otherwise an error will be reported: fckeditor.html page cannot be found 
//$oFCKeditor->Value = '' ; 
$oFCKeditor- >Width = '100%' ; 
$oFCKeditor->Height = '300' ; 
$oFCKeditor->Create() ; 
?>

The following is the supplement of other netizens. It is very detailed and you can also refer to it:
FCKeditor is a very popular WEB visual editor. Its program is also very mature and feature-rich, but No matter how rich it is, it cannot fully meet our actual requirements. Sometimes we still need to add some functions of our own. However, the program structure of FCKeditor is still relatively complex, and it is difficult for people who do not know JS very well to customize it flexibly. This article will introduce how to add a custom button to open my photo album to the toolbar of FCKeditor.

Let’s take a look at the effect first:

There are several steps to add a button:

1. Add a picture for the button:
All button pictures of FCK are stored in one picture File, this is quite unique, the file is stored in the corresponding skin directory, such as: /FCK/skins/silever/fck_strip.gif. Open the file through Fireworks or Photoshop and you will find a very long picture that contains pictures of all the buttons. Now you can add your customized buttons at the bottom of the picture. Note that the size of each button is 16*16px.

2. Add function code for the button:
Adding a button requires modifying two core files in the FCK/editor/js directory: fckeditorcode_gecko.js and fckeditorcode_ie.js. The former is used in the gecko core browsers such as Firefox, etc., while the latter is used in browsers with IE as the core such as MyIE (Maxthon). The two files are generally similar with only minor differences. We basically don’t need to worry here.
The modification method is very simple. It is basically a process of copying the gourd. First, we find a button with a similar function to the button we are going to add. Here we choose Newpage, which is a way to clear the editor in preparation for creating a new one. A file button. First, we modify fckeditorcode_ie.js, and fckeditorcode_gecko.js can directly copy the changed code.

Open fckeditorcode_ie.js. What needs to be explained here is that fckeditorcode_ie.js is a merged file of multiple files and code optimization (that is, most line breaks, spaces, comments, etc. have been removed). It is not very easy to read, and such a After opening the JS file of more than 100K with Dreamweaver, ZDE and other tools, the CPU immediately rose to 100%. I believe that the computer has become like a dementia. After a comparison, I found that Golive, which I once thought was worthless, can easily open the file. File and edit quickly! No matter what software you use, as long as you can open and edit it. Search with the keyword Newpage, and you will find that the function definition of a button is divided into three parts:

A. Function 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. Instantiation of function
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 code of Newpage, and the latter part is our customization The code, you should understand what's going on at a glance, right? Only the red part and the name are different! The red part is our custom function.
FCKLang is a language package object. You only need to open the corresponding language package under FCK/editor/lang/ and add the corresponding name attribute. For example: MyAlbum opens my photo album. Pay attention to capitalization! At this point our addition work has been completed.