Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Applies defined CSS classes to the ACF WYSIWYG editor so that you can individually style them.
<?php
function hwid_acf_admin_footer() {
?>
<script>
( function( $) {
acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id ) {
// grab the classes defined within the field admin and put them in an array
var classes = $( '#' + id ).closest( '.acf-field-wysiwyg' ).attr( 'class' );
if ( classes === undefined ) {
return mceInit;
}
var classArr = classes.split( ' ' ),
newClasses = '';
// step through the applied classes and only use those that start with the 'hwid-' prefix
for ( var i=0; i<classArr.length; i++ ) {
if ( classArr[i].indexOf( 'hwid-' ) === 0 ) {
newClasses += ' ' + classArr[i];
}
}
// apply the prefixed classes to the body_class property, which will then
// put those classes on the rendered iframe's body tag
mceInit.body_class += newClasses;
return mceInit;
});
})( jQuery );
</script>
<?php
}
add_action('acf/input/admin_footer', 'hwid_acf_admin_footer');
.hwid-field-group {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
.hwid-field-group.hwid-dark {
background: #000;
color: #fff;
}
.hwid-field-group.hwid-light {
background: #eee;
color: #333;
}
.hwid-field-group.hwid-red {
background: #fff;
color: #f00;
}
<?php
function hwid_theme_add_editor_styles() {
add_editor_style( 'css/editor-style.css' );
}
add_action( 'admin_init', 'hwid_theme_add_editor_styles' );
@chrispink
Copy link

Your last change, line 20 of the prefix 'hwid-' to 'rmg-' makes no sense and breaks the code.
I've changed it in the version I have used and it works.
Nice piece of work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment