I’ve added editor styles that work on the backend but not on the front. I realize this feature might not be available in the plugin yet, but is it possible to add styles to my front-end wysiwyg fields and how?
Hi @David Crabill
This has not yet been tested, so you will be the first to find out if this is possible.
Have you attempted to load a custom style?
What code are you using?
@elliot, I figured as much. I tried a number of things before coming here, so I supposed that the feature hadn’t been included yet. Maybe with some guidance I can help get this into a future version.
I’m just using the standard add_editor_style() to add custom styles to the backend wysiwyg boxes. This custom style works on both the_content and on acf wysiwyg fields.
The custom style doesn’t work on the wysiwyg fields on the frontend. Looking at the source, there is a JS object called “tinyMCEPreInit” in the footer, which contains an element called “content_css”, which holds the url of the custom stylesheet. “tinyMCEPreInit” on the frontend looks similar to what’s on the backend, except that it doesn’t have the “content_css” element.
I looked in the plugin and it looks like ACF might have a homegrown version of the wysiwyg field? I couldn’t tell if you’ve switched to using wp_editor() yet.
wp_editor() has an argument called “editor_css”, presumably for that “content_css” element. If acf’s system is homegrown, maybe it would be possible to add an “editor_css” argument to the $options array for acf_form(), which could hold the url of the editor stylesheet. Or better yet, it would be nice if it just used the same logic to know when I’m calling add_editor_style(), which gets called through the ‘init’ action, so it should be available on the frontend.
Hi @David Crabill
Currently, ACF is not able to use the native wp_editor functionality due to limitations with the repeater field and that function.
I’ll take a look and find a way to allow for custom styles to be added to the ACF WYSIWYG.
Thanks
Elliot
Hi @elliot,
I see that there is an acf_settings class added to the WYSIWYG editor body but nothing unique to the particular editor. What I’ve seen in other plugins is they add a specific class so that you can style just that editor using the editor’s custom stylesheet. Having a class added that is pretty much the same name as the field name would be ideal. So if the field name is my_editor_field, you can could a class called acf_my_editor_field.
Let me know if this is a feature that may be added.
Thanks,
Jason
Hi @JboyJW
This is definitely a feature which will be added. But may not be added until some more pressing issues are addressed
Thanks
E
Fantastic @elliot, I look forward to it.
Cheers.
Just a vote in support for adding this feature. It would really help out. Thanks for your responsiveness, Eliot! Every new update I install always has new features or fixes that were on my wishlist!
Would also love to see this — clients often ask for editor styles to match their display styles.
I know it’s been a while for the rest of the commenters on this thread, but I found a way (maybe a little hacky) to do this. In my theme functions.php file I added:
add_filter( 'tiny_mce_before_init', 'override_mp6_tinymce_styles' );
function override_mp6_tinymce_styles( $mce_init ) {
// make sure we don't override other custom <code>content_css</code> files
$content_css = get_stylesheet_directory_uri() . '/bd-editor.css';
if ( isset( $mce_init[ 'content_css' ] ) )
$content_css .= ',' . $mce_init[ 'content_css' ];
$mce_init[ 'content_css' ] = $content_css;
return $mce_init;
}
mp6 styling was getting in the way, so I hooked into the tiny_mce_before_init filter to force my editor styles to load anyway. Hope this helps someone.
I miss this feature very much, too.
Although the hack by @joelgoodman works, it would be nice to see ACF compatible with add_editor_style
Is this still a viable solution?
I have added this to my functions file, and I can see it being loaded in the source, but it doesn’t seem to be taking effect. I can inspect the editor iframe and see it loaded inside the iframed html head, just like the admin-side editor, but still, the style doesn’t not seem to be
The CSS file is open and accessible, but it still doesn’t appear to actually access the file.
Nevermind, solution found. I reordered the way css was loaded. Rather than load my editor CSS first, I loaded it last. I undersestimated how comprehensive the default editors CSS was, so I wasn’t seeing any of my “overiding” CSS. I changed the if statement to this:
$content_css = get_stylesheet_directory_uri() . '/bd-editor-style.css';
if ( isset( $mce_init[ 'content_css' ] ) ) {
$content_css_new = $mce_init[ 'content_css' ].','.$content_css;
}
$mce_init[ 'content_css' ] = $content_css_new;
