| 1 | | We allow our clients to use CKEditor's full HTML page feature to edit their e-mail templates. |
| 2 | | |
| 3 | | Most e-mail templates require the use of HTML tables, to comply with outdated e-mail clients (Outlook) for layout. Because of this, we have set our editor to HTML mode. |
| 4 | | |
| 5 | | We have found the following issue from our clients: |
| 6 | | |
| 7 | | When a user has text inside a <td> tag, they are unable to change the color, size etc of the text, unless a preceding block level element exists inside the <td> cell. |
| 8 | | |
| 9 | | We have tested this on our version of CKEditor, the version on the demo page, and the nightly SVN version, and can all replicate this bug. |
| 10 | | |
| 11 | | I've attached a "e-mail template" from Campaign Monitor. To replicate the issue: |
| 12 | | 1. copy the HTML into CKEditor's source feature |
| 13 | | 2. Select the text Heading 1 |
| 14 | | 3. Try and change the colour of the text, using the CKEditor text colour selector to red. |
| 15 | | 4. The colour will not change, and many <span> tags are added to the HTML |
| 16 | | |
| 17 | | To prove that you need a block level element at the beginning of the <td>: |
| 18 | | 1. Repeat steps 1 and 2 above |
| 19 | | 2. Add a new line before Heading 1 |
| 20 | | 3. Select the Heading 1 text, and attempt to change its color to red. This should now work |
| 21 | | |
| 22 | | This behavior has been tested in FF10, FF9, Chrome, and IE9. But I suspect is an issue across all browsers. From my testing, it is not only <h1> tags that can't be edited without a preceding block level element. It is all text elements, such as <p>, <span> etc. |
| | 1 | To reproduce paste in the below code: |
| | 2 | 1. |
| | 3 | {{{ |
| | 4 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| | 5 | <html> |
| | 6 | <head><!-- Facebook sharing information tags --> |
| | 7 | <meta content=" " property="og:title"> |
| | 8 | <title></title> |
| | 9 | </head> |
| | 10 | <body leftmargin="0" marginheight="0" marginwidth="0" offset="0" topmargin="0"> |
| | 11 | <table border="0" cellpadding="20" cellspacing="0" width="100%"> |
| | 12 | <tbody> |
| | 13 | <tr> |
| | 14 | <td valign="top"><!--Begin Module Standard Content--> |
| | 15 | <h1 class="h1">Heading 1</h1> |
| | 16 | <h2 class="h2">Heading 2</h2> |
| | 17 | mollis a. |
| | 18 | </td> |
| | 19 | </tr> |
| | 20 | </tbody> |
| | 21 | </table> |
| | 22 | </body> |
| | 23 | </html> |
| | 24 | }}} |
| | 25 | 2. Try to apply font-size or font color to text in heading one |
| | 26 | 3. Because of the comment above there will be no change and result will look like |
| | 27 | {{{ |
| | 28 | <span id="cke_bm_111S" style="display: none;"> </span>Heading 1<span id="cke_bm_111E" style="display: none;"> </span></h1> |
| | 29 | }}} |
