Search code examples
htmlwysiwyg

Saving a plain text string as a WYSIWYG editor string


I currently have a web application written in C++, which saves data to a MySQL database. Now in this application there exists a page, which contains a WYSIWYG editor and this value is saved in the database as a string. The value will contain html tags along with the value that was typed into this field. This application also hosts an API, which allows a user to POST data to it, which will just be plain text (no html formatting) sent as JSON, which the application will process. This is an example of 2 fields thats my application will take as POST data from JSON and will want to process it,

{
  "description" : "Hello world",
}

As the page in my web application is now using a WYSIWYG editor as a "text field", the value now needs to be saved with HTML formatting on the string that is part of the incoming data from the JSON POST. I want to show an example of what sample data looks like after a value was saved in a database field after submitting data using a WYSIWYG editor,

'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
    <META http-equiv=Content-Type content='' text/html; charset=utf-8''>
</HEAD>

<BODY>
    <FONT SIZE=3 FACE='' calibri,sans-serif''>
        <DIV />
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div>
                                                        <div>
                                                            <div>
                                                                <div>
                                                                    <div>
                                                                        <div>
                                                                            <div>
                                                                                <div>
                                                                                    <div>
                                                                                        <div>
                                                                                            <div>
                                                                                                <div>
                                                                                                    <div>
                                                                                                        <div>
                                                                                                            <div>
                                                                                                                <div>
                                                                                                                    <div>
                                                                                                                        <div>
                                                                                                                            <div>
                                                                                                                                <div>
                                                                                                                                    <div>
                                                                                                                                        <div>
                                                                                                                                            <div>
                                                                                                                                                <div>
                                                                                                                                                    <div>
                                                                                                                                                        <div>
                                                                                                                                                            <div>
                                                                                                                                                                <div>
                                                                                                                                                                    <div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <div>
                                                                                                                                                                                    <div>
                                                                                                                                                                                        <div>
                                                                                                                                                                                            <div>
                                                                                                                                                                                                <div>
                                                                                                                                                                                                    <div>
                                                                                                                                                                                                        <div>
                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                                    <div>
                                                                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                                                            <div>
                                                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                                                    <p
                                                                                                                                                                                                                                                                                        id="description">
                                                                                                                                                                                                                                                                                        <strong>Hello world</strong>
                                                                                                                                                                                                                                                                                    </p>
                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                            </div>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                </div>
                                                                                                                                                                                            </div>
                                                                                                                                                                                        </div>
                                                                                                                                                                                    </div>
                                                                                                                                                                                </div>
                                                                                                                                                                            </div>
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>
                                                                                                                                                                </div>
                                                                                                                                                            </div>
                                                                                                                                                        </div>
                                                                                                                                                    </div>
                                                                                                                                                </div>
                                                                                                                                            </div>
                                                                                                                                        </div>
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>
                                                                                                            </div>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </FONT>
</BODY>

</HTML>

You can see it contains a lot of html tags. The value entered into the WYSIWYG editor was "Hello world".

Has anyone got any ideas on how I could go about formatting my string into data that is output to the database from the WYSIWYG editor?


Solution

  • If you want to view the data formatted as rich text you have to save it as rich text with HTML tags. In this case you have to change the WYSIWYG editor as the one you have is clearly very buggy and includes a lot of redundant HTML tags.

    Another thing to consider is minifying the HTML code into smaller code removing the redundant spaces. Compression of the entire string is also an option but anything depends on how fast you want this information processed (read/write).

    If the text will be read as simple text and the formatting is redundant then remove the WYSIWYG entirely or if the UI is not in your control and you have to keep it, then parse the HTML and get only the rendered text between the tags.