Troubleshooting WYSIWYG editor bare text and extra divs problems

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.
Using the editor with this CSS you can immediately see problems as they develop.

Key issues revealed:
  • On starting a new page, the editor is in bare mode. Possible fix, start new docs with <p>&nbsp;</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>&nbsp;</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

    Access your files securely from anywhere

        All-in-one knowledge management and training platform for your employees and customers.







                              Zoho Developer Community




                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts





                                                              Manage your brands on social media



                                                                    Zoho TeamInbox Resources



                                                                        Zoho CRM Plus Resources

                                                                          Zoho Books Resources


                                                                            Zoho Subscriptions Resources

                                                                              Zoho Projects Resources


                                                                                Zoho Sprints Resources


                                                                                  Qntrl Resources


                                                                                    Zoho Creator Resources



                                                                                        Zoho CRM Resources

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner









                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

                                                                                                Writer is a powerful online word processor, designed for collaborative work.

                                                                                                  Zoho CRM コンテンツ




                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方