Updated the styles in the WYSIWYG editor?

43 views
Skip to first unread message

Shane

unread,
Mar 1, 2021, 6:45:20 PM3/1/21
to dotCMS User Group
Is it possible to make the site styles render in the WYSIWYG editor? We have some folks complaining that styles don't "look right", but in preview it does look correct. 

That would be a really awesome feature if it is possible. 

Xander Steinmann

unread,
Mar 2, 2021, 2:29:53 AM3/2/21
to dotCMS User Group
It depends on your dotCMS version whether you need a static WYSIWYG plugin for it or the tinymceprops field variable of a WYSIWYG field.

Kind regards,

Xander

Nathan Keiter

unread,
Mar 2, 2021, 8:54:13 AM3/2/21
to dot...@googlegroups.com
I think this would be nearly impossible. The styles look correct on the page (preview mode) because of cascading inheritance via the parent HTML elements. Inside the editor it stands alone, out of context with the page placement. Additionally, the same content could look very different on different pages. Even if this could be done, which page would the editor take it's style cues from?

Nathan I. Keiter | Lead Network Applications Programmer | I.D.E.A Council Member
Gettysburg College | Information Technology | DataSystems
Campus Box 2453 | 300 North Washington Street | Gettysburg, PA 17325
Phone: 717.337.6993
https://www.gettysburg.edu<https://www.gettysburg.edu/>
________________________________
From: 'Shane' via dotCMS User Group <dot...@googlegroups.com>
Sent: Monday, March 1, 2021 6:45 PM
To: dotCMS User Group
Subject: [dotcms] Updated the styles in the WYSIWYG editor?

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
________________________________
Is it possible to make the site styles render in the WYSIWYG editor? We have some folks complaining that styles don't "look right", but in preview it does look correct.

That would be a really awesome feature if it is possible.

--
http://dotcms.com<https://linkprotect.cudasvc.com/url?a=http%3a%2f%2fdotcms.com&c=E,1,EdBetQZ_0SqTAhZ_Tu0FZWi_GpYlGPsdAFEPBQi-q5gmCk8X7UJycrcNfDh5-NKsdgLVVoPLA7hb9KwP8SgCLX6IOxXyAC6vhzrRvpweOdzxWJC1YhwZ7g,,&typo=1> - Open Source Java Content Management
---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com<mailto:dotcms+un...@googlegroups.com>.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/14706403-96f9-4248-adc9-d536d75c8f18n%40googlegroups.com<https://linkprotect.cudasvc.com/url?a=https%3a%2f%2fgroups.google.com%2fd%2fmsgid%2fdotcms%2f14706403-96f9-4248-adc9-d536d75c8f18n%2540googlegroups.com%3futm_medium%3demail%26utm_source%3dfooter&c=E,1,rEuR6HaNRP_n8zVtulwA93gISHD85S-gVjbynKtY62HnxdW2luesARqDpeN0GFekMAXljYzoOEic6vWFFj65s5daPz8ye0z-u73UcN5mXEIJoWe3OAnum5eQ-MFw&typo=1>.

Will Ezell

unread,
Mar 2, 2021, 9:01:45 AM3/2/21
to dot...@googlegroups.com
It's not perfect, like Nathan mentioned, but you can get close.  Our demo site imports a default style sheet that matches the site styles into its wysiwyg - you can see the config here:

https://demo.dotcms.com/dotAdmin/#/c/site-browser/ce6d1141-fda9-4bf2-8395-960aa7045a59

The line in the config is:

    content_css: "/application/wysiwyg/wysiwyg.css",



--
http://dotcms.com - Open Source Java Content Management

---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dotcms+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/1614693250459.53869%40gettysburg.edu.


--



382 NE 191st St #92150
Miami, Florida 33179-3899
Main: 
305-900-2001 | Direct: 978.294.9429

   

Shane

unread,
Mar 2, 2021, 11:10:27 AM3/2/21
to dotCMS User Group
Oh very interesting Will. That is something I will have to try.
This is possible with a cloud install too right?

Will Ezell

unread,
Mar 2, 2021, 1:30:24 PM3/2/21
to dot...@googlegroups.com
Yeah, you can totally do this on a cloud instance.

Shane

unread,
Sep 15, 2021, 3:50:04 PM9/15/21
to dotCMS User Group
Coming back to this after some time.

So following this section it sounds like I can change setting across the whole site, but I can't quite place where the variable setting the location of vtl file goes?

> The system will look for the file /application/wysiwyg/tinymceprops.vtl on the host the user is on. If it exists, it will be used.
I have this file set up and in the right place, but nothing seems to happen. Maybe I am missing something?

The contents of tinymceprops.vtl are:
{
content_css: 'https://<my-dotcms-install-path>.com/application/themes/stackpath/css/main.dotsass'
}

Maybe it's the .dotsass filetype?

Will Ezell

unread,
Sep 15, 2021, 4:36:49 PM9/15/21
to dot...@googlegroups.com
What version are you on?  This was added in a later version that might not be included in the LTS version you are running. 

Shane

unread,
Sep 15, 2021, 4:38:34 PM9/15/21
to dotCMS User Group
Looks like I am on: 
Version: 5.3.8.5 (May 28, 2021)

Will Ezell

unread,
Sep 15, 2021, 4:49:01 PM9/15/21
to dot...@googlegroups.com
Yeah sorry, it is not in your version yet, it is slated for the next LTS version. 

See:

Shane

unread,
Sep 15, 2021, 4:52:09 PM9/15/21
to dotCMS User Group

Oooh, well that makes sense. haha.
Sounds like I just need to stay tuned.
Reply all
Reply to author
Forward
0 new messages