Support

Account

Register Login

Home › Forums › Front-end Issues › WYSIWYG Styling

Solved

WYSIWYG Styling

  • 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.

  • +1

  • 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;
Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘WYSIWYG Styling’ is closed to new replies.