Troubleshooting WYSIWYG editor bare text and extra divs problems
Hi Revathi Priya,
(This overlaps what I added to a post yesterday, but I wanted to make sure you saw it for possibly helping devs.)
The following custom CSS does a pretty good job of highlighting and rapidly showing the editor problem:
=============================
body#zwIframeBody p,
body#zwIframeBody ul,
body#zwIframeBody ol,
body#zwIframeBody li,
body#zwIframeBody td
{
color: #252525;
}
/*
Temporary editor styles for troubleshooting "bare" text */
body#zwIframeBody { color: #F0F; }/* Firefox and Chrome */
body#zwIframeBody>div,
body#zwIframeBody>div>div,
body#zwIframeBody>div>div>div,
body#zwIframeBody>div>div>div>div,
body#zwIframeBody>div>div>div>div>div
{ color: #70F; } /* Chrome */
====================================
This only has an effect in the editor. The effect is:
- Bare text is colored pink. Seen a lot in Firefox, and for the initial region of text in Chrome.
- Text enclosed only in divs is colored purple. Chrome-specific problem, it seems.
Key issues revealed:
- On starting a new page, the editor is in bare mode. Possible fix, start new docs with <p>
</p>, and place the cursor within. - Inserting a table places the cursor after the table, not enclosed in any tag. Possible fix: when inserting a table, follow it with <p>
</p> and place the cursor within. - After styling some text in a heading style, hitting Enter sends the editor to bare mode.
- Converting a series of p-enclosed paragraphs to a list correctly strips the p's so that the text items are enclosed only in the li tags. However, converting li items to non-list converts them to bare text, not to p-enclosed paragraphs. (Fix: obviously when changing li's to text, wrap them in p tags.)
- Chrome adds a lot of superfluous divs at various junctures.
- Various paste scenarios may cause problems -- not fully investigated.
I hope this is a help. The most important thing here is the CSS which helps visualize the problem live.
- Graham
My issue tracking: GWZ1021 continued