wysiwyg editor site css configuration

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
labman's picture

Hi,
Sorry if this a newbie type question. I have been coding my pages in D7 with a minimal use of a rich text editor, maybe using it to add tables etc. I now have 2 collegues that will be adding page content but they do need a rich text editor as they have minimal knowledge of html. I am going to set up some page layouts for them using Ipsum Lourum type content that they can overwrite.

My question is: can the editor reflect the css of the main site even when the theme for editing is different? I use the "Seven" theme for editing & "Bootstrap" for the site. I would like the user to see exactly what they are going to get when they save the (body) content they're editing.

Comments

When What You See Isn't What You Get

loopduplicate's picture

It's pretty hard to do. The two main choices you have are:
* To use the same or similar theme for editing.
* To inject the CSS and/or JS from your main theme into your admin theme.
** Injecting CSS/JS into the admin theme can be done using the WYSIWYG module and other similar modules.
** Usually just injecting the main CSS/JS into the admin theme still doesn't really ever allow the editors to truly see what the thing they are editing is going to look like.

It's way easier to just save the node as unpublished (or, if you use workflow modules, in another state besides published), see what it looks like, and then revise as needed until it's right.

Some people write CKEditor code to have special buttons that create templates of sorts that editors can fill out. That's pretty complicated too but if you look around, there are people who have shared code and wrote modules to support this.

Bottom line for me: everyone wants this but it's really really hard.

Regards,
Jeff

Have you tried Quick Edit?

awasson's picture

@labman, Have you tried the Quick Edit module in conjunction with your WYSIWYG editor?

https://www.drupal.org/project/quickedit

Drupal 8 has Quick Edit built into core along with CKEdit but the backport for Drupal 7 will provide this functionality. It's a pretty amazing bit of UI/UX technology. I haven't used the Drupal 7 version but use it quite often in Drupal 8.

Combined with some fancy CSS, this should provide the experience you're looking for.

Andrew

I've just tried Quick Edit

labman's picture

I've just tried Quick Edit but it is just the same as bringing the Rich Text Editor from the edit page out into the front page. It is still using the css from the edit theme, or is there a way to tell to use the site theme css?

I am now getting comments from my collegues, "in wordpress.........", d'oh!

Ha... Your WP colleagues are

awasson's picture

Ha... Your WP colleagues are just envious of Drupal 8.

Ok, with Quick Edit, WYSIWYG + CKEdit 4.6.1.x, JQuery Update set to 1.7 and the libraries for backbone and underscore, I was able to rough this out so that it was useful.

Unfortunately I'm not able to upload a screenshot but I was able to wrap the page around the editor and make the editor fill the page with a line of CSS. Otherwise, the editor opens in it's own little window hovering above the page:

.quickedit-form {
    position: relative;
    z-index: 300;
    max-width: 100%;
}

I suspect as @loopduplicate suggested, you can override the CKEdit CSS and inject your own styles so that the editor will get a better user experience. I have overridden the CKEdit styles in Drupal 8 but not Drupal 7. I have overridden the CSS with TinyMCE in Drupal 7 though.

Cheers,
Andrew

Wysiwyg

Group organizers

Group categories

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week