Posted by labman on February 24, 2017 at 10:58am
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
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?
@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
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
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