Add a Custom button to zhimeng ckeditor to customize the style

 

The editor is upgraded to ckeditor3.6.2 instead of fck after the dream reaches 5.7. When we edit the body part of the content page, a custom style is required for the front-end body part, but ckeditor does not involve a custom style.

Example page: http://www.badubox.com/game/500.html,

You can see the border with dotted lines, that is, the custom style.

Of course, you can also directly write a style in the template and call a Custom Field for implementation. However, this method does not require this field attribute in the document, such a style exists on the front-end page, causing tedious code and unfavorable optimization.

The Custom button will appear when we use it during editing. If it is not used, there will be no style or code on the front-end page, therefore, it is perfect to add custom attributes with custom buttons.

Ckeditor adds a Custom button to implement the custom attribute process:

1. First, open Logging.

2. Open the ckeditor. js file in the ckeditor folder and find the code: n ('bold ', p. Bold, 'bold', o. coreStyles_bold );

Add the following code: n ('custom', p. customm, 'custom', o. coreStyles_custom );

Note: here, the M is Custom, but the first letter must be in upper case, followed by all in lower case.

3. continue to search for I. coreStyles_bold = {element: 'strong ', overrides:' B '} In ckeditor. js '};

Add the code below: I. coreStyles_custom = {element: 'custom '};

4. Continue searching for I. toolbar_Basic = in ckeditor. js

['Bold ', 'italic', '-', 'numberedlist', 'bulletedlist', '-', 'link', 'unlink ', '-', 'about'];

Here is the basic edit button of the editor. In 'bold ', add 'custom ',

The Code is as follows:

[['Bold ', 'custom', 'italic', '-', 'numberedlist', 'bulletedlist', '-', 'link', 'unlink ', '-', 'about'];

5. continue to search for the code: {name: 'basicstyles ', items: ['bold', add 'custom ',,

The Code is as follows:

{Name: 'basicstyles ', items: ['bold', 'custom', 'italic ', 'underline', 'strike', 'subscript', 'superscript ', '-', 'removeformat']},

6. Open http://www.badubox.com/include/ckeditor/ckeditor.inc.php

Note: This is the directory on this site. The relative directory is/include/ckeditor. inc. php.

Here we use the software editor as an example. Similarly, the software editor references the "small" button array.

This can be found in dede/templets/soft_add.htm:

Modify $ toolbar ['small'] = content after $ toolbar in ckeditor. inc. php

Add 'custom' to array ('bold ', 'italic', 'underline', 'strike ',

7. At this time, the basic modification is complete. After the cookies and history are cleared, open the Software section and add documents. The editor looks like this:

Note: cookies and history must be cleared.

8. The button appears, but the button is still blank and there is no icon. Create the icon below.

Open http://www.badubox.com/javasde/ckeditor/skinsnote: this is the website directory.

Here is the zhimeng skin folder, with only kama skin. Open icons.png under the Kama folder

Add a button at the bottom,

Access editor.css under the Kama folder and find:

. Cke_skin_kama. cke_button_bold. cke_icon {background-position: 0-304px ;}

Add a style after it:

. Cke_skin_kama. cke_button_custom. cke_icon {background-position: 0-1295px ;}

Now clear cookies and history records and add software in the background. The editor works as follows:

Let's take a look at the effect. after entering the text, click the source code button:

OK. In the editor, add the Custom button and customize the style.

9. Test the front-end display effect.

Find the .viewbox. content style in http://www.badubox.com/templets/default/style/page.css. Add the style. viewbox. content custom {border: 1px dotted red; font-size: 20px ;}

Note: The above is the path of this site. If you have modified the path, please search for it based on your website. Set the style according to your own needs. Here we will only test the effect.

The background editing is as follows:

The foreground page is as follows:

 

The effect of the Self-writing style table is achieved, and the effect test is complete. (Style can be edited at Will)

If you need buttons of various styles, simply follow the above method to apply them.

Design by www.badubox.com