Plugin Author
Josh
(@josh401)
Hi,
Okay.. when you add a stylesheet to the editor, it gets included in the editor initialization process.. and renders any rules into the content editor.
It does not automatically add the styles to the “Formats” dropdown. To do this; requires additional custom code.
The purpose of creating an editor stylesheet is to add additional styles which mimic your theme; so the content editor more closely resembles your theme.
Adding styles to the “Formats” dropdown requires completely different code. You can use the Pro version of WP Edit; or this link has a good example (read under “Add new items to Formats”):
http://www.wpexplorer.com/wordpress-tinymce-tweaks/
Plugin Author
Josh
(@josh401)
Hi. Just checking back to see if you made any progress.
Not exactly. I try to read information by using the link that you send me but im not sure what I need to do
The most “close” information to my question was:
Load a stylesheet with your CSS
Use this function to load a new stylesheet for use in your admin panel – some plugins/themes might already be adding a stylesheet so if your theme/plugin is doing that skip this and just add your custom CSS and tweak the js (shown below).
view source
print?
1 function my_shortcodes_mce_css() {
2 wp_enqueue_style(‘symple_shortcodes-tc’, plugins_url(‘/css/my-mce-style.css’, __FILE__) );
3 }
4 add_action( ‘admin_enqueue_scripts’, ‘my_shortcodes_mce_css’ );
But I’m not sure to what file i need to add this function
Plugin Author
Josh
(@josh401)
Okay.. I think I may be confusing you.
You are describing two different parts of the editor.
1) Custom CSS
Adding a custom stylesheet to the editor allows the styles to render properly in the editor. It does NOT add anything to the “Formats” dropdown box.
2) Formats dropdown
This is the dropdown box where my “predefined styles” appear. If you want to add more styles to this dropdown… then you will have to use separate code.
The link I provided above outlines the process.
But I’m not sure to what file i need to add this function
This code will need to be placed in your child theme functions.php file.
Thanks for the update
I have two separated tasks:
1. Enable the WP-Edit to use my theme\template CSS style
the editor come with his own CSS style for example: when using the WP-Edit the font style and the size is not identical to the theme\template font style.
Is there an option to “tell” WP-Edit that I want him to use my theme CSS file?
2. Formats dropdown
add to the Formats dropdown menu a custom style that are included in my theme\template CSS style.
Does this task could be accomplished in a simple way?
For example, a PHP code that I can add that “tell” to WP-edit: “please include the following CSS style in the format menu”?
Does the Professional version of WP-edit enable me to accomplish this task using GUI interface and not a PHP code?
Best regards’
Eyal Doron
Plugin Author
Josh
(@josh401)
1)
Most themes that have an editor-style.css file, will automatically include it in the editor.
If you would like to include an additional CSS file in the editor, you can do so with a WordPress function, placed in your child theme functions.php file:
function add_css_to_editor($init) {
$css_file_url = 'path_to_your_css_file';
if(isset($init['content_css'])) {
$init['content_css'] = $init['content_css'].','.$css_file_url;
}else{
$init['content_css'] = $css_file_url;
}
}
add_action('tiny_mce_before_init', 'add_css_to_editor');
Change the path_to_your_css_file to the location of the CSS file you wish to include.
However, you shouldn’t simply replicate the theme css file. Instead, you should carefully select which styles to include in the editor, and create a new CSS file with those styles.
2)
Yes.. the link I provided before shows code which illustrates how to add additional formats to the dropdown.
Yes.. the pro version of WP Edit provides a GUI for creating additional style formats which are added to the dropdown.
