How to modify the style of the article editor in WordPress _php tips

Customizing the story editor style
each WordPress theme article style is not the same, but in the use of the background of the visual editor to edit the article, the style is consistent.

But WordPress offers a custom style feature in the article Visualization editor, which allows you to customize CSS styles in the WordPress visual editor.

The visual editor style set to the same as the front end, you can easily preview the article directly displayed in front of the results, do not refresh the repeated debugging article layout style.

Adding a custom CSS style sheet to the story editor only requires the use of the Add_editor_style () function.

First create a EDITOR-STYLE.CSS style sheet file in your theme root directory and add it to the functions.php file:

/**
  *wordpress Custom article editor style
  *http://www.endskin.com/editor-style//
function Bing_add_editor_ Style () {
  add_editor_style ();
}

Add_action (' After_setup_theme ', ' Bing_add_editor_style ');

In this way, the EDITOR-STYLE.CSS style sheet is introduced in the visual editor, and writing CSS in the Editor-style.css file can be directly reflected in the visual editor.

customizing CSS files

In addition, you can customize the path to the CSS file:

/**
  *wordpress Custom article editor style
  * Custom CSS file
  *http://www.endskin.com/editor-style//
function Bing_ Add_editor_style () {
  add_editor_style (' css/custom-editor-style.css ');//This will call the theme directory CSS folder Custom-editor-style.css file
}
add_action (' after_setup_theme ', ' Bing_add_editor_style ');

This invokes the "Css/custom-editor-style.css" file of the subject directory.

Introducing an external CSS file

The Add_editor_style () function also supports the introduction of external CSS files:

/**
  *wordpress Custom article editor style
  * External CSS file
  *http://www.endskin.com/editor-style//
function Bing_add_editor_style () {
  Add_editor_style (' http://cdn.bootcss.com/font-awesome/4.2.0/css/ Font-awesome.min.css ');//introduce external CSS file
}
add_action (' after_setup_theme ', ' Bing_add_editor_style ');

Well, that's it. Recommend two WordPress Editor plugins:

CKEditor for WordPress plugin
CKEditor for WordPress Introduction

CKEditor Editor is a very powerful rich text editor, and CKEditor for WordPress is specifically for WordPress customized version, used to replace the default editor, there are two sets of skin optional, support for the comment box to add edit toolbar, with The Ckfinder file upload control can achieve more functionality.

CKEditor for WordPress Features:

• Replace the default WordPress editor with CKEditor
• You can add an edit toolbar to a comment box
• Published by CKEditor can be published in a special style of color text (optional)
• Built-in file management and upload Manager, support ckfinder--an AJAX file browser
• Built-in WordPress "Read More" label (1)
• Integration of voting Wp-polls (3)
• Integration of NextGen Gallery for album Plugins (5)
• Integration of the rating plug-in GD Star Rating (4)
• Integration of the Viper ' s video quicktags plug-in (2)
• The integration of WordPress media buttons
• Configurable output format
• Customizable toolbar buttons
• Customizable skin

and other

Keditor itself has a more flexible setting options, you can configure according to their own needs, the following describes the file upload control Ckfinder.

Install Ckfinder File Upload Control

CKEditor also has a strong own file upload plug-in ckfinder, enhanced ckeditor upload function, the default is not installed, you can access the download Ckfinder PHP version: http://ckfinder.com/download

Upload the contents of the Ckfinder folder to the root directory of "Ckfinder" in the CKEditor for WordPress plugins directory.

Delete the config.php file under the original folder and change the ckfinder_config.php to config.php.

Then access the background ckeditor-upload Options for the relevant settings can be.

CKEditor and Ckfinder Downloads

CKEditor for WordPress Download: http://wordpress.org/extend/plugins/ckeditor-for-wordpress/

Ckfinder Download: http://ckfinder.com/download

kindeditor for WordPress plugin (in line with Chinese custom)
The Kindeditor editor is a simple, efficient, Easy-to-use editor, built with Google Code prettify, that can easily and quickly insert code. In addition, the Pan First Sea buddies will make a wordpress plugin: Kindeditor for WordPress. It is better to be able to compose a key, use the picture upload function, insert code Highlighting, visual Insert <!-more-> Summary button and so on.

Kindeditor for WordPress installation use

1. Can be in the Background plug-in installation interface Search Kindeditor online installation, or download kindeditor for WordPress

2. After the plug-in is enabled, under Settings-kindeditor settings, you can set whether to enable foreground code highlighting, you can choose some styles

Experience

I was tested in the 3.5.1 environment, found that kindeditor for WordPress seems to be fixed the width of the editor, if you narrow the browser, you will find that the editor will not adapt to change the size, resulting in the right part of the text is directly masked, I hope the plugin author can solve this problem.

Download Kindeditor for WordPress