Problem with custom CSS in editor
Hi folks. I get the impression some work was done on the WYSIWYG editor sometime in the last couple of months -- if it addressed a few points I raised earlier -- great.
However, one new problem has surfaced. Custom CSS for use in the WYSIWYG editor no longer works in Firefox, though it does work in Chrome. This is troublesome as we had determined that Firefox was our most reliable choice for using the editor in the first place (but, as mentioned above, it would be nice if that was overcome).
Our custom CSS file has styles targeted at selectors like body#zwIframeBody h2 and so on, parallel to all the content styles that appear on a normal page. Now none of these get applied in the WYSIWYG editor in Firefox. Indeed, it looks like the custom CSS file doesn't get loaded for the editor in the iframe.
The problem seems to be due to the fact that your html uses this link tag to load the iframe CSS:
<link id="zwCustomCSSForEditor" href="/_attach/1.1/zoho-gw-01.css" rel="stylesheet">
... using a relative path. This is the same as done in the enclosing page (which works), but in this case the enclosing iframe doesn't specify any base path (instead using an event to load the content), so the relative path is ambiguous. If I use FF's Inspector feature to edit that link href to include the wiki URL, then the CSS immediately gets loaded, and the editor immediately starts applying the expected styles to the WYSIWYG content.
I believe browsers vary in how they handle this case, which is my current bet as to why this works in Chrome but not FF.
Graham
[Belatedly adding a tracking Id: GWZ1028 ]
Writer
Get Started. Write Away!
However, one new problem has surfaced. Custom CSS for use in the WYSIWYG editor no longer works in Firefox, though it does work in Chrome. This is troublesome as we had determined that Firefox was our most reliable choice for using the editor in the first place (but, as mentioned above, it would be nice if that was overcome).
Our custom CSS file has styles targeted at selectors like body#zwIframeBody h2 and so on, parallel to all the content styles that appear on a normal page. Now none of these get applied in the WYSIWYG editor in Firefox. Indeed, it looks like the custom CSS file doesn't get loaded for the editor in the iframe.
The problem seems to be due to the fact that your html uses this link tag to load the iframe CSS:
<link id="zwCustomCSSForEditor" href="/_attach/1.1/zoho-gw-01.css" rel="stylesheet">
... using a relative path. This is the same as done in the enclosing page (which works), but in this case the enclosing iframe doesn't specify any base path (instead using an event to load the content), so the relative path is ambiguous. If I use FF's Inspector feature to edit that link href to include the wiki URL, then the CSS immediately gets loaded, and the editor immediately starts applying the expected styles to the WYSIWYG content.
I believe browsers vary in how they handle this case, which is my current bet as to why this works in Chrome but not FF.
Graham
[Belatedly adding a tracking Id: GWZ1028 ]
Access your files securely from anywhere
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Graham Wideman
Revathi Priya
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho Campaigns Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー