It would be great if there was a way to specify a custom class or classes to add to the body tag within a WYSIWYG field. Often times, there will be specificly styled areas within a design for the field’s content and the editing experience is greatly improved when the WYSIWYG editor styles match the rendered page.
It’s currently possible to modify the body class using the ‘wysiwyg_tinymce_settings’ filter but there are some problems with targeting a specific field. For example, a WYSIWYG field within a repeater will have a changing ID so you can’t target the field that way consistently.
Here’s a gist I created showing how I’m adding the body class:
https://gist.github.com/hereswhatidid/891c2ac452f35fea89fb
I was able to put together a working prototype but I’m not sure what the best way is to get the code to you. Is there an email address I can send it over as an attachment? Otherwise I can post it to a gist if that’s easier.
Hi @hereswhatidid
You could also target the body by the surrounding acf field wrapper. For example:
.acf-field-<fieldkey> iframe body{
}
I don’t believe you can target the content of an iframe with CSS in the parent document (as far as I know) so that wouldn’t really work. Technically I could use JavaScript to go in and manually apply the body class after the fact but that feels a bit hacky.
Hm right.. But then adding a custom class to the body won’t do you any good either unless you use the add_editor_style.. but maybe you’ve thought of that already 🙂
I noticed the body element has an data attribute of the field key:
acf-editor-55cbc6fcb7ab7
So maybe you can target that
body[data-id="acf-editor-55cbc6fcb7ab7"]{
}
That’s actually the goal I had in mind. The field key on the body works a bit but you can’t really anticipate what that will be and it varies quite a bit once you start using repeaters.
Yeah using it for repeater wysiwyg provides a challenge. I think that Elliot created the wysiwyg field before wp_editor() became available as I can’t see that he’s using it in core. Or perhaps there’s another reason.
In any case looking through the code it does not seem to be any available undocumented hooks for working with the classnames.
I will assign @elliot to this topic and perhaps he has some more feedback.
Thanks! And like I mentioned earlier, I was able to add in an option within the admin for adding values to the body class with about 8 lines of code but I wasn’t sure how to submit code changes like that. Also, the classes can be controlled through a JS filter but it isn’t quite as clean as an actual field setting:
http://hereswhatidid.com/2015/08/customize-acf-wysiwyg-input-styles/
Alright 🙂
Nice domain name btw. Currently there is no way to “collaborate” on ACF even tho there’s a repo on Github. I think Elliot is holding off on that right now.
I had needed to do this a couple months ago for a client. Rather than having class names entered into the administration of the fields as hereswhatidid did, I simply added the field name, field key, Flexible Content name (if any) and Flexible Content layout name (if any) to the body tag classes.
I decided to make a plugin to enable this functionality, though on the plugin page I also provide code that will do the same thing (FAQ tab).
https://wordpress.org/plugins/acf-wysiwyg-styling/
Thanks @delwinv for the share!
We’ll see if Elliot has the time to implement better support for this natively in the future 🙂
Thanks @delwinv for the plugin – very useful, would be great if this functionality could be added to the core plugin.
I also think this function should be added to the core plugin. It’s very useful. I’m using @hereswhatidid approach by now. Thanks!
+1 for this functionality in the core of ACF.
I’m also currently using a workaround (jQuery) to apply the classes to the TinyMCE body based on the class that’s applied to the parent ACF field.
I was also using a variation of the plugin in order to customise style within wysiwyg but the last update broke the functionality.
It now does not give the correct field name to the class (acf-field-name-undefined).
Let me know if someone has a working solution.
Thanks.
Mmm yeah I was using the ACF WYSIWYG Styling plugin, but that is now only adding the class ‘acf-field-name-undefined’ to the wysiwyg iframe. The javascript solution above only gives me a javascript error in wordpress now as well.
Does anyone have a solution that works with the latest acf version?
Here is a bit of code that can be used to target specific tinyMCE edtors that I’ve used to detect changes in an editor in order to trigger other events. I don’t know if this will help anyone or not.
jQuery(document).ready(function($){
// add an action to a wysiwyg field
// this function will fire every time a tinyMCE editor is initialized
tinyMCE.on('addEditor', function(e) {
// this makes sure it is an acf editor
if (typeof(e.editor) == 'undefined' || !e.editor.id.match(/^acf-editor/)) {
// not an acf wysiwyg field
return
}
// get the text area of the acf field matching the id
// and make sure that the field key matches the one we want
// to add the action to
var $field_key = $('#'+e.editor.id).closest('.acf-field').data('key');
// see if it is the field key of the field we want to deal with
if ($field_key != 'field_58923ed03766b') {
// not our field
return;
}
// this is the bit that adds a tigger on the input of the editor
var object = $('#'+e.editor.id);
e.editor.on('input', function(ed) {
// trigger the action we want to act on
object.trigger('input');
});
}); // end tinyMCE.on
}); // end ready function
I’ve had another look at the ACF WYSIWYG Styling plugin and also the acf docs and made a slight tweak to the code used in that plugin and I’m getting the classes added to my WYSIWYG’s again:
function acf_plugin_wysiwyg_styling() { ?>
<script>
(function($) {
acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id, $field) {
var fieldKey = $field.data('key');
var fieldName = $field.data('name');
var flexContentName = $field.parents('[data-type="flexible_content"]').first().data('name');
var layoutName = $field.parents('[data-layout]').first().data('layout');
mceInit.body_class += " acf-field-key-" + fieldKey;
mceInit.body_class += " acf-field-name-" + fieldName;
if (flexContentName) {
mceInit.body_class += " acf-flex-name-" + flexContentName;
}
if (layoutName) {
mceInit.body_class += " acf-layout-" + layoutName;
}
return mceInit;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'acf_plugin_wysiwyg_styling');
Cool,
It works perfectly.
Thanks
