tinyMCE breaking quotes in Wordpress editor

[stewarttodd]

My site is ​http://www.fortheloveofport.com

I am using the avada template (from themefusion.com)

I have the following code on my home page in a tagline box:

[tagline_box backgroundcolor="#f6f6f6" shadow="yes" highlightposition="top" title="Decanting Vintage Port - The Hersh Method" description="Decanting is a simple process to remove sediment and also to allow a wine to breathe. This article provides basic instruction on how to achieve both. <a href='http://MYDOMAIN.COM/2006/02/10/decanting-vintage-port-the-qhersh-methodq/' rel="nofollow">Read more</a>."][/tagline_box]

Every now and then, part of the text in the tagline box disappears.

When i go in and look at the code, I discover that the single quotes around the link in the box have been converted by the Wordpress editor to double quotes and it breaks the shortcode:

The resulting (broken) code looks like this:

[tagline_box backgroundcolor="#f6f6f6" shadow="yes" highlightposition="top" title="Decanting Vintage Port - The Hersh Method" description="Decanting is a simple process to remove sediment and also to allow a wine to breathe. This article provides basic instruction on how to achieve both. <a href="http://MYDOMAIN.COM/2006/02/10/decanting-vintage-port-the-qhersh-methodq/" rel="nofollow">Read more</a>."][/tagline_box]

The developer of the theme looked into this issue and said it looks like a problem with tinyMCE.

Here is the thread:
​http://theme-fusion.com/forums/topic/tagline-box-quotes-changing-mysteriously/

[azaozz]

Hi stewarttodd,

In TinyMCE shortcodes are simple text strings (unless there is some special treatment). HTML tags inside a shortcode attribute are rendered as "standard" HTML.

In your example once the <a> tag becomes a DOM node, it's not easy (and pretty much pointless) to try and remember what type of quotes were used initially. When the DOM is serialized, all HTML attributes are wrapped in double quotes.

There are several ways to work around this issue:

• Escape any HTML tags in shortcode attributes, i.e. replace <, >, &, ", with entities.
• Use single quotes for shortcode attributes that contain HTML.
• Store the HTML as a content of the shortcode, i.e. wrapped by [...] and [/...].
• Replace the shortcode with a placeholder image. Then the actual shortcode string can be stored as an encoded attribute on the image tag (see [gallery] and wpView).

Closing as worksforme. Feel free to reopen if there is a better way to handle this (preferably with an example patch).