Customizing WP Editor in WordPress

I was recently working on a freelance project and one of the tasks is to replace all the textareas in the front-end to the default WYSIWYG editor of WordPress. They also wanted to use a limited number of buttons for both Visual and Text tab. After some research, I was able to come up with my own customized editor that works perfectly in both front-end and back-end:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
$content = 'The content to be loaded';
$editor_id = 'my_editor_id';
$settings = array(
'wpautop' => true, // enable auto paragraph?
'media_buttons' => false, // show media buttons?
'textarea_name' => $editor_id, // id of the target textarea
'textarea_rows' => get_option('default_post_edit_rows', 10), // This is equivalent to rows="" in HTML
'tabindex' => '',
'editor_css' => '', // additional styles for Visual and Text editor,
'editor_class' => '', // sdditional classes to be added to the editor
'teeny' => true, // show minimal editor
'dfw' => false, // replace the default fullscreen with DFW
'tinymce' => array(
// Items for the Visual Tab
'toolbar1'=> 'bold,italic,underline,bullist,numlist,link,unlink,forecolor,undo,redo,',
),
'quicktags' => array(
// Items for the Text Tab
'buttons' => 'strong,em,underline,ul,ol,li,link,code'
)
);
wp_editor( $content, $editor_id, $settings );
?>

For the complete list of quicktags and tinymce buttons, please refer to the following links:
https://codex.wordpress.org/Quicktags_API
http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls

Function based:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function cvf_content_editor( $textarea_id, $default_content ) {

$content = 'The content to be loaded';
$editor_id = 'my_editor_id';
$settings = array(
'wpautop' => true, // enable auto paragraph?
'media_buttons' => false, // show media buttons?
'textarea_name' => $editor_id, // id of the target textarea
'textarea_rows' => get_option('default_post_edit_rows', 10), // This is equivalent to rows="" in HTML
'tabindex' => '',
'editor_css' => '', // additional styles for Visual and Text editor,
'editor_class' => '', // sdditional classes to be added to the editor
'teeny' => true, // show minimal editor
'dfw' => false, // replace the default fullscreen with DFW
'tinymce' => array(
// Items for the Visual Tab
'toolbar1'=> 'bold,italic,underline,bullist,numlist,link,unlink,forecolor,undo,redo,',
),
'quicktags' => array(
// Items for the Text Tab
'buttons' => 'strong,em,underline,ul,ol,li,link,code'
)
);

wp_editor( $content, $editor_id, $settings );

}

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me