Applies defined CSS classes to the ACF WYSIWYG editor so that you can individually style them.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function hwid_theme_add_editor_styles() { | |
add_editor_style( 'css/editor-style.css' ); | |
} | |
add_action( 'admin_init', 'hwid_theme_add_editor_styles' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.