Correct. The standard WYSIWYG doesn’t appear to have this problem. Here’s an example with the standard WYSIWYG on top and the ACF editor in the History tab below.
Same content in both originally – http://grab.by/JGx6
How content is saved after hitting publish/update – http://grab.by/JGxe
Original with all tags/shortcodes inline – http://grab.by/JGxk
After updating – http://grab.by/JGxs
Original with hard returns – http://grab.by/JGxy
After updating – http://grab.by/JGxA
@hube2 Thanks once again for your help, but I have noticed another ‘bug’ the Wysiwyg Editor fields don’t seem to be displaying content with paragraph tags anymore either with the activation of the filter plugin.
I currently have the call looking like this …
the_field(‘column_1′, $term);
// $term = $taxonomy.’_’.$term_id to get the correct category content
I found this http://goo.gl/Y8Jw5E and tried reversing it like this …
the_field(‘column_1’, true, true, $term);
But that broke it 🙁
but I tried this and it worked …
$wysiwyg = get_field('column_1', $term);
echo apply_filters('the_content', $wysiwyg);
I hope this may help others in the future.
Would this work in reverse?
the_field(‘wysiwyg_field’, true, true);
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/
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.
I just wrote a blog post on how I was able to use the wrapper CSS Class field on the WYSIWYG to modify the body class within the rendered iframe:
http://hereswhatidid.com/2015/08/customize-acf-wysiwyg-input-styles/
I also have a fix in place that would add a new property to all WYSIWYG fields that lets you directly specific the classes rather than using the filter but I’m waiting on that to be reviewed.
Let me know what you think, thanks!
Hi @tizgrape
Do you experience this when trying to use the media button in a wysiwyg field?
I’ll second this request! Jim, I like your idea of the option to use a text field as the label. One downside to that is if there is no text field with the FC block. For example, I have FC fields that are just one wysiwyg field.
Extending your idea, I’d add a conditional option to add a text field for the custom label. Or, just create a standard text field for the custom label.
I actually created a quick hack of the acf plugin to do this. Would love this added to ACF as a feature. I posted it here:
https://wordpress.org/support/topic/possible-to-replace-label-with-a-custom-label-when-editing-a-post?replies=6#post-7287977
I actually came across this:
https://wordpress.org/plugins/advanced-custom-fields-custom-wysiwyg-styles/
Albeit, I have heavily modified it to do some of the things I need it to do for my custom setup, but the basics work and are there to build upon.
Works nicely! I may repost my version into a more generic-use plugin for this, because there are some issues that the author didn’t account for in his code.
Don’t wait around for me though, you’ll probably be best to take that plugin and modify it for yourself too.
Definitely interested in this as well. Would be great to be able to specify a unique editor-styles.css for each WYSIWYG field either through front end options or a filter.
Guess 1 :
@elliot In my case, it seems it is the great number of TinyMCE WYSIWYG that slows things down. I’ve looked at the code in acf-input.js and there’s a different tinymce.init for every field (which is logical), but since mine were had all the same params, I’ve tried to “cache” all the ones with the same params to init them all at the same time in the same call, but the only effect that had was to prevent loading the CSS files again and again. Which didn’t correct the problem completely even though I saw a really small difference in loading time.
Guess 2 :
My other guess is the WOFF fonts. I don’t know why, but in my Chrome developer tools, I see those loading right after as if they were the one to block the loading. Couldn’t figure out why the server wouldn’t cache them, which should rule out that guess as well.
Guess 3 :
Before activating script debug mode, it seemed to block ad a load-scripts.php call with a lot of scripts in it. But after activating the debug mode, I’ve seen it didn’t seem to be this one that was causing the slowdown, but much more the 54 calls to tinymce.js… Why 54? I don’t know. I only had 25 tinymce fields in view at the time.
Guess 4 :
(╯°□°）╯︵ ┻━┻
I currently have the same issue. I am also using a lot more conditionals than it should be because tabs seem to have a problem with them. When there is, let’s say, a field to check (true/false) that makes a tab and its sub-fields appear, the tab appears but the sub-tabs aren’t checked on by the conditionals. In other words, if they are set to appear at another conditional inside the tab, they still are showing.
Ex.:
– Show content boxes (checkbox = checked)
— Tab showing wysiwyg boxes (appears as per conditional)
— Content box wysiwyg (showing as per conditional)
— Show alternate content (checkbox = not checked)
— Alternate content box wysiwyg (showing, conditional not respected)
I had to add a conditional that applies to each sub field that checks both checkboxes (inside and outside the tab) which adds a lot more than necessary and slows down everything.
Maybe using Zepto instead of jQuery would help out fiddling a little less with the dom? Is all the dom play necessary?
I uninstalled and removed ACF. I tried this with a previous version of ACF and this don’t work. After updating to the latest version still not working. Also, I tried to create another WYSIWYG field with different name and doesn’t work either.
Yes, in main post content editor this works fine. It only happens in WYSIWYG editor of my ACF’s field 🙁
Yes, I have WordPress latest version too.
Hi Jonathan,
I tested it with twentyfifteen and only ACF Pro 5.2.8 enabled and it’s still removing all my content when I try to save a WYSIWYG field. Any ideas of how can we debug this?
Thanks
Okay so I’ve tried it now on a WYSIWYG field.. I tested the car emoji ? 🙂
It works just fine for me.. the content is saved regardless of how I place the emoji. Could you try disabling all other plugins and test it again? And perhaps try it with the default twentyfifteen theme. Just to eliminate any outside interference
Hi @andreu
When you say that all the field content is removed do you mean that your emojis are removed or that if you’ve pasted in a block of text in the wysiwyg-field and save it the whole thing gets removed leaving you with an empty editor?
If so, does the same thing happen if you paste in text NOT containing any emojis?
Hi @robert-pal
There’s a filter you can use to modify the toolbars without altering the code directly
acf/fields/wysiwyg/toolbars
which takes in the $toolbars variable which is an array. You might be able to use that to modify the toolbar to show only exactly what you’d want.
I worked it out that I can change the defaults of the Wysiwyg Editor in fields/wysiwyg.php , but wonder if there is a way to pass the parameters trough the acf_from() function
It’d be nice to add these to ACF wysiwyg fields exclusively, different from the other wysiwyg fields default in wordpress.
Hi @roflman79
Unfortunately ACF does not yet support Distraction free mode. However you can make use of the “Full screen mode” that is available on the WYSIWYG toolbar.
1) no other filter, just frontend templates
2) As you can see I use 2 field groups in the acf_form. The first one is made just for frontend form (is where I have post title, content and featured image), the second one (where I have the issue) is the very same I use in backend.
3) IN the 2nd field group I have 6 fields, in this order:
– true/false field (true is the condition for all the following fields to show) – working
– wysiwyg field – working
– flexible content field (inside there are 4 layouts, with a total of 11 subfields) – not working
– flexible content field (inside there are 2 layouts with a total of 5 subfields) – Not working
– flexible content field (inside there are 2 layouts with a total of 3 subfields) – Not working
– wysiwyg field – working
If you want to try, I’ve exported both groups in this zip file https://dl.dropboxusercontent.com/u/3261727/field-groups.zip
PS: I’ve tried not to use the second group (the complex one) and using another one just with 1 repeater field with only one text subfield, same problem: data is sent from the form, rows are created in backend but values are empty, infact in database I can see serialized strings like this one: a:2:{i:0;s:1:”A”;i:1;s:1:”A”;}
Further update.
debugging the form data with chrome dev tools, it looks like the values are sent, but for some reason they are not saved in db
here it is the admin-ajax.php form data sent in headers
_acfnonce:d1c835265a
_acfchanged:1
_acf_form:eyJpZCI6ImZyb250ZW5kLXJlY2lwZSIsInBvc3RfaWQiOiJuZXciLCJuZXdfcG9zdCI6ZmFsc2UsImZpZWxkX2dyb3VwcyI6WyJncm91cF81NTllOWVkYjQwZmNhIiwiZ3JvdXBfNTU5ZTllZGI1Yzg1ZCJdLCJmaWVsZHMiOmZhbHNlLCJwb3N0X3RpdGxlIjpmYWxzZSwicG9zdF9jb250ZW50IjpmYWxzZSwiZm9ybSI6dHJ1ZSwiZm9ybV9hdHRyaWJ1dGVzIjp7ImlkIjoicG9zdCIsImNsYXNzIjoiIGFjZi1mb3JtIiwiYWN0aW9uIjoiIiwibWV0aG9kIjoicG9zdCJ9LCJyZXR1cm4iOiJodHRwOlwvXC93d3cubm9ubmFwYXBlcmluYS5pdFwvaW5zZXJpc2NpLXJpY2V0dGFcLz91cGRhdGVkPXRydWUiLCJodG1sX2JlZm9yZV9maWVsZHMiOiIiLCJodG1sX2FmdGVyX2ZpZWxkcyI6IiIsInN1Ym1pdF92YWx1ZSI6IkludmlhIFJpY2V0dGEiLCJ1cGRhdGVkX21lc3NhZ2UiOiJTYWx2YXRvISIsImxhYmVsX3BsYWNlbWVudCI6InRvcCIsImluc3RydWN0aW9uX3BsYWNlbWVudCI6ImxhYmVsIiwiZmllbGRfZWwiOiJkaXYiLCJ1cGxvYWRlciI6ImJhc2ljIn0=
acf[field_559a8e6366915]:This is the post title
acf[field_559a8e7b66916]:this is the post content
acf[field_559a8eb766918]:C:\fakepath\80_IMG_2650.jpg
acf[field_5368b65e4cd39]:1
acf[field_5383505f17035]:this is another wysiwyg field
acf[field_5368bdb913e74]:
acf[field_5368bdb913e74][acfcloneindex][acf_fc_layout]:recipe_tot_time
acf[field_5368bdb913e74][acfcloneindex][field_5368beb2078cc]:
acf[field_5368bdb913e74][acfcloneindex][field_5368bf64078cd]:
acf[field_5368bdb913e74][acfcloneindex][field_536cfd2d6fa7a]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfd516fa7b]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfdab6fa7c]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfb9f6fa76]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfbfb6fa77]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfc516fa78]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfeb06fa7f]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfed36fa80]:0
acf[field_5368bdb913e74][acfcloneindex][field_536cfef46fa81]:0
acf[field_5368bdb913e74][559fe5a1e1e57][acf_fc_layout]:recipe_dosi
acf[field_5368bdb913e74][559fe5a1e1e57][field_5368beb2078cc]:5
acf[field_5368bdb913e74][559fe5a1e1e57][field_5368bf64078cd]:people
acf[field_5368bdb913e74][559fe5a7e1e58][acf_fc_layout]:recipe_prep_time
acf[field_5368bdb913e74][559fe5a7e1e58][field_536cfd2d6fa7a]:0
acf[field_5368bdb913e74][559fe5a7e1e58][field_536cfd516fa7b]:0
acf[field_5368bdb913e74][559fe5a7e1e58][field_536cfdab6fa7c]:30
acf[field_5368bdb913e74][559fe5afe1e59][acf_fc_layout]:recipe_cook_time
acf[field_5368bdb913e74][559fe5afe1e59][field_536cfb9f6fa76]:0
acf[field_5368bdb913e74][559fe5afe1e59][field_536cfbfb6fa77]:0
acf[field_5368bdb913e74][559fe5afe1e59][field_536cfc516fa78]:20
acf[field_5368bdb913e74][559fe5b2e1e5a][acf_fc_layout]:recipe_tot_time
acf[field_5368bdb913e74][559fe5b2e1e5a][field_536cfeb06fa7f]:0
acf[field_5368bdb913e74][559fe5b2e1e5a][field_536cfed36fa80]:0
acf[field_5368bdb913e74][559fe5b2e1e5a][field_536cfef46fa81]:50
acf[field_53694b8b14a44]:
acf[field_53694b8b14a44][acfcloneindex][acf_fc_layout]:recipe_ingredient
acf[field_53694b8b14a44][acfcloneindex][field_5369557ce3365]:
acf[field_53694b8b14a44][acfcloneindex][field_53694c0014a45]:
acf[field_53694b8b14a44][acfcloneindex][field_53694c8514a46]:
acf[field_53694b8b14a44][acfcloneindex][field_53694cdd14a47]:
acf[field_53694b8b14a44][acfcloneindex][field_53694cf514a48]:
acf[field_53694b8b14a44][559fe5b7e1e5b][acf_fc_layout]:recipe_ingredient
acf[field_53694b8b14a44][559fe5b7e1e5b][field_53694c0014a45]:1
acf[field_53694b8b14a44][559fe5b7e1e5b][field_53694c8514a46]:spoon
acf[field_53694b8b14a44][559fe5b7e1e5b][field_53694cdd14a47]:sugar
acf[field_53694b8b14a44][559fe5b7e1e5b][field_53694cf514a48]:
acf[field_53694b8b14a44][559fe5c1e1e5c][acf_fc_layout]:recipe_ingredient
acf[field_53694b8b14a44][559fe5c1e1e5c][field_53694c0014a45]:200
acf[field_53694b8b14a44][559fe5c1e1e5c][field_53694c8514a46]:ml
acf[field_53694b8b14a44][559fe5c1e1e5c][field_53694cdd14a47]:water
acf[field_53694b8b14a44][559fe5c1e1e5c][field_53694cf514a48]:
acf[field_536954f9e3362]:
acf[field_536954f9e3362][acfcloneindex][acf_fc_layout]:recipe_process_step
acf[field_536954f9e3362][acfcloneindex][field_53695987027e2]:
acf[field_536954f9e3362][acfcloneindex][field_5369588b92009]:
acf[field_536954f9e3362][acfcloneindex][field_536958c19200a]:
acf[field_536954f9e3362][559fe5d5e1e5d][acf_fc_layout]:recipe_process_step
acf[field_536954f9e3362][559fe5d5e1e5d][field_5369588b92009]:pur sugar in water
acf[field_536954f9e3362][559fe5d5e1e5d][field_536958c19200a]:
acf[field_536954f9e3362][559fe5dce1e5e][acf_fc_layout]:recipe_process_step
acf[field_536954f9e3362][559fe5dce1e5e][field_5369588b92009]:mix a lot and drink
acf[field_536954f9e3362][559fe5dce1e5e][field_536958c19200a]:
acf[field_53695a0dcfde2]:this is yet another wysiwyg field
action:acf/validate_save_post
PS: what is “acfcloneindex”?
Hi @njs
I’m not sure wether this is ACF or WP Core “fault”.
Pretty sure that the ACF wysiwyg-field makes use of the wp_editor function provided by WordPress to output an editor (like any other plugin usually do):
https://codex.wordpress.org/Function_Reference/wp_editor
And it does not seem to have a setting for this. So my guess is that WP Core doesn’t support the same behaviour for editors created with that function as the core editor.
Have you looked into it any further, done some googling on editors in WP in general?
What version of ACF are you using? Is this for an image field of a wysiwyg field?
acf-export-2....zip
