How to modify the style of the article editor in WordPress

This article mainly introduces how to modify the style of the article editor in WordPress, and also recommends two plug-ins to replace the default article editor. For more information, see Customize the style of the article editor
The style of each WordPress topic is different, but the style is consistent when you use the visual editor in the background to edit the article.

However, WordPress provides a function to customize styles in the document Visual Editor. you can use this function to customize CSS styles in the WordPress visual editor.

You can set the style of the visual editor to be the same as that of the front-end, so that you can directly preview the article display results at the front end without refresh the layout style of the debugging article.

To add a custom CSS style table in the article editor, you only need to use the add_editor_style () function.

First create a editor-style.css style sheet file in your topic root directory, and then add in 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 case, the editor-style.css style sheet will be introduced in the visual editor, the CSS written in the editor-style.css file can be directly reflected in the visual editor.

Custom CSS file

In addition, you can also customize the path of 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 custom-editor-style.css file of the CSS folder in the theme directory} add_action ('After _ setup_theme ', 'Bing _ add_editor_style ');

This calls the "css/custom-editor-style.css" file of the topic directory.

Introduce external CSS files

The add_editor_style () function also supports introducing 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, we recommend the following two WordPress editor plug-ins:

CKEditor for WordPress plugin
CKEditor for WordPress overview

CKEditor editor is a powerful rich text editor for foreigners. CKEditor for WordPress is a version tailored to WordPress and used to replace the default editor. It has two skin options, you can add a toolbar for the comment box and use the CKFinder file upload control to implement more functions.

CKEditor for WordPress features:

• Use CKEditor to replace the default WordPress editor
• You can add and edit a toolbar to the comment box.
• You can use CKEditor to publish special colored text (optional)
• Built-in file management and upload manager, supporting CKFinder-an AJAX file browser
• Built-in WordPress "read more" tag (1)
• Integration of Wp-Polls in voting (3)
• Integration of the album plug-in NextGEN Gallery (5)
• Integration of the scoring plug-in GD Star Rating (4)
• Integration of Viper's Video Quicktags plug-in (2)
• Integrate WordPress media buttons
• Output format configurable
• Customizable toolbar buttons
• Customizable skin

And Others

KEditor has flexible settings. you can configure it as needed. The following describes the file upload control CKFinder.

Install the CKFinder file upload control

CKEditor also has its own powerful file Upload plug-in CKFinder, enhanced CKEditor Upload function, by default not installed, you can access download CKFinder PHP version: http://ckfinder.com/download

Upload the contents of the ckfinder folder to the "ckfinder" root directory under the CKEditor for wordpress plug-in directory.

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

In this case, access the background CKEditor-Upload Options for relevant settings.

Download CKEditor and CKFinder

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

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

Kindeditor for WordPress plug-in (in line with Chinese habits)
The Kindeditor editor is a simple, efficient, and easy-to-use editor developed by Chinese people. it has a built-in google code pretplugin, allowing you to insert code easily and quickly. In addition, kaixianhai has created a WordPress plug-in: Kindeditor for WordPress. It is better to enable one-click formatting, use the built-in image upload function, insert code highlighting, and visualize insertion. Summary button.

Kindeditor for WordPress installation and use

1. you can search for Kindeditor online installation on the background plug-in installation interface, 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 select some styles.

Experience

I tested it in the 3.5.1 environment and found that Kindeditor for WordPress seems to have fixed the editor width. if you narrow down the browser, you will find that the editor does not change the size automatically, as a result, the text on the right side is directly masked. I hope the plug-in author can solve this problem.

Download Kindeditor for WordPress