Dream CKEditor Add custom buttons to implement custom styles

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

After 5.7, the editor is no longer a FCK, but an upgrade to ckeditor3.6.2. When we edit the body part of a content page, the front body part needs a custom style, but CKEditor does not have a custom style involved.

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

You can see a dotted border, which is a custom style.

Of course, you can write a style directly in the template, call a custom field to achieve, but this method, in the article does not need this field properties, in the foreground page will have such a style exists, resulting in cumbersome code, not conducive to optimization.

and the custom button, when edited, we use, will appear, but not use, in the foreground page does not have any style or code, so the custom button to add custom attributes is a perfect way.

CKEditor Add custom buttons to implement custom property processes:

1, first open Http://www.badubox.com/include/ckeditor Note: Here for the site directory, please find/include/ckeditor on your own space or server.

2, open the CKEditor folder under the Ckeditor.js file, find the code: N (' bold ', P.bold, ' bold ', o.corestyles_bold);

Then add the code: N (' Custom ', P.custom, ' Custom ', o.corestyles_custom);

Note: This custom is customized, but must be capitalized first, followed by all lowercase.

3, continue to find i.corestyles_bold={element in Ckeditor.js: ' Fervent ', overrides: ' B '};

Add code later: i.corestyles_custom={element: ' Custom '};

4. Continue to find i.toolbar_basic= in Ckeditor.js

You can see behind it [[' Bold ', ' Italic ', '-', ' numberedlist ', ' bulletedlist ', '-', ' Link ', ' Unlink ', '-', ' about ']];

Here is the editor's most basic edit button, in ' Bold ', after adding ' Custom ',

Add complete code as:

[' Bold ', ' Custom ', ' Italic ', '-', ' numberedlist ', ' bulletedlist ', '-', ' Link ', ' Unlink ', '-', ' about ']];

5, continue to find the code: {name: ' basicstyles ', items:[' Bold ', followed by the same ' Custom ',

Add complete code as:

{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 site directory, relative directory for/include/ckeditor/ckeditor.inc.php

Here we are in the Software column editor to say, other Similarly, the Software column editor refers to the button array for SGT

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

Modify $toolbar[' Sgt ' in ckeditor.inc.php = what follows

In array (' Bold ', ' italic ', ' underline ', ' Strike ', '-'), add ' Custom ',

7, this time the basic modification, cleaning cookies and historical records, open the Software column, add documents, editor looks like the following:

Note: Be sure to clear cookies and historical records.

8, the button appears, but the button is still blank, and does not have an icon, the following start to make the icon.

Open Http://www.badubox.com/include/ckeditor/skins Note: Here is the site directory.

Here is the dream of the Skin folder, which only kama this skin. Open the Icons.png in the Kama folder

Add a button at the bottom, as shown in figure:

Next, open the Editor.css in the Kama folder to find:

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

Add style after:

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

Now clean cookies and history, enter the background to add software, the editor effect is as follows:

We look at the use effect, enter text, click the source button:

OK, Dream Weaving ckeditor The editor adds a custom button and implements the custom style completion.

9, the following test foreground display effect.

In Http://www.badubox.com/templets/default/style/page.css, find the. viewbox. Content style, add styles after this style. Viewbox. Content Custom {border:1px dotted red;font-size:20px}

Note: The above is the site path, if you have made changes, then please find according to their own website situation. Style according to their own needs to fill out, here just to do the test results.

Background editing is as follows:

The front page effects are as follows:

The Write style sheet effect is implemented and the effect is tested. (style can be written freely)

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

Design by www.badubox.com Eight-degree box Game network