I’d like to use a series of custom WYSIWYG feilds to allow my contributors to add content to different areas of a template layout. These areas have different widths and styles on the front-end, and it’s very hard for contributors to get a nice result with out a LOT of previewing to see where linebreaks wind up, etc.
It would be amazing if there were a place to specify a custom stylesheet for each WYSIWYG field independently when adding it to the field set.
Hi @tirussell
Are you able to attach some screenshots to aid your request?
Thanks
E
Sure! In the example below what I want to do is have the “Sidebar Area 1” in the third screencap have a restrained width that matches the width of the side bar that gets rendered on the front end. That way, contributors won’t have to guess where line breaks will be.
These should open full-size in new windows if I’ve done it right:
Hi @tirussell
I see.
Thanks for the screenshots. I think CSS for the WYSIWYG content is a great feature to add, I’ll look into it in the future.
Cheers
E
Curious what the progress on this was?
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.
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.
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!
@hereswhatidid thanks for the code, real life saver !
@hereswhatidid Nice work. For anyone who uses this code, make sure line 20
if ( classArr[i].indexOf( 'rmg-' ) === 0 ) { is changed to
if ( classArr[i].indexOf( 'hwid-' ) === 0 ) {
