Steps to reproduce:

  • Enter a line of text.
  • Select the line and format as any level header (header1, header2, etc.)
  • Place cursor before the line
  • Click the Drupalbreak button
  • Disable the rich text editor and examine the position of the break tag

The bug is not limited to heading element either. Inserting a break on a blank line places the break tag between the opening and closing p tags. Firefox seems to detect the missing close tag and insert one, however IE does not. This causes invalid XHTML markup and on pages with lists of node teasers it can look quite bad in IE.

I have tested with Tinymce editor 2.1.0 and 2.1.2 on Firefox 2 and IE 7.

CommentFileSizeAuthor
#5 editor_plugin.js_.txt2.49 KBkomodo_1
#5 editor_plugin_src.js_.txt7.37 KBkomodo_1
#5 drupalbreak.css_.txt246 byteskomodo_1
#5 plugin_reg.php_.txt4.48 KBkomodo_1
#5 plugin_showup.jpg146.65 KBkomodo_1
#5 botton_not_showing.jpg69.16 KBkomodo_1
#3 drupalbreak_0.patch26.92 KBtangent
#2 editor_plugin_src.js_.txt7.16 KBtangent
#1 drupalbreak.patch1.11 KBimrook

Comments

imrook’s picture

imrook commented
Status: Active » Needs review
StatusFileSize
new drupalbreak.patch1.11 KB

Okay, so I had a chance to do some debugging on this and I found the cause of the problem and a possible solution. The problem stems from the fact that drupalbreak's editor_plugin.js is calling 'mceInsertContent' which inserts the break tag within the current tag set. My patch is mostly code from mceInsertRawHTML, however rather than calling mceInsertContent it uses insertAfter to add the new content after the current node. I have tested this on Firefox 2 and IE6, however, I am not a javascript expert so I would appreciate it if someone who knows TinyMCE or javascript better than I do to take a look at the patch.

Index: editor_plugin_src.js
===================================================================
--- editor_plugin_src.js        (revision 409)
+++ editor_plugin_src.js        (working copy)
@@ -66,7 +66,18 @@
                                        + ' width="100%" height="12px" '
                                        + 'alt="<--break->" title="<--break-->" class="mce_plugin_drupalbreak_break" />';

-                                       tinyMCE.execInstanceCommand(editor_id, 'mceInsertContent', false, html);
+                                // Insert marker key
+                                key = 'tinymce_marker';
+                                keynode = inst.getDoc().createTextNode(key);
+                                tinyMCE.insertAfter(keynode, focusElm);
+
+                                // Find marker and replace with RAW HTML
+                                var html2 = inst.getBody().innerHTML;
+                                if ((pos = html2.indexOf(key)) != -1)
+                                        tinyMCE.setInnerHTML(inst.getBody(), html2.substring(0, pos) + html + html2.substring(pos + key.length));
+
+
+
                                return true;
                        case "mcedrupalpagebreak":
                                var classValue = "";
tangent’s picture

tangent commented
Title: Drupalbreak causing invalid XHTML » Drupalbreak plugin produces invalid teaser markup
StatusFileSize
new editor_plugin_src.js_.txt7.16 KB

This issue affected my sites as well so I set out to patch the drupalbreak plugin. Instead I ended up rewriting it from scratch.

The main issue is that the break is allowed to be added inside html elements so that the teaser will always have incomplete (not well-formed) markup. Simply making sure that the break is added at the editor root level is insufficient though because the break may be moved around with drag-n-drop afterwards. This also doesn't resolve nodes which already contain breaks and are edited later.

My plugin includes the following improvements.

  • Ensures that the drupalbreak button will always add the break at the root level, immediately following the currently selected content.
  • Ensures that only 1 break exists.
  • Moves any existing break to the editor root, immediately following the html element it was found in. (additional breaks are removed if more than 1)
  • Ensures that the break always separates teaser content from following content in the editor (i.e., clears around aligned images and other floated elements).
  • Uses DOM instead of string parsing so is significantly smaller than the current plugin.
  • Eliminates the pagebreak button because it is unneeded if that module is not installed. A separate plugin should be included with that dubious module in my opinion.

It has been tested with Firefox, IE, and Safari and works well. The only imperfection is that drag-n-drop isn't handled immediately (break may be dragged inside an element) but this is corrected on article submission or when toggling out of "rich text" mode.

tangent’s picture

tangent commented
StatusFileSize
new drupalbreak_0.patch26.92 KB

Here is the very large patch.

holydrupal’s picture

holydrupal commented

thanks a lot for the plugin it works fine.

komodo_1’s picture

komodo_1 commented
StatusFileSize
new botton_not_showing.jpg69.16 KB
new plugin_showup.jpg146.65 KB
new plugin_reg.php_.txt4.48 KB
new drupalbreak.css_.txt246 bytes
new editor_plugin_src.js_.txt7.37 KB
new editor_plugin.js_.txt2.49 KB

I have a little problem.
I apllied patches, and – Drupal Teaser/Body Break - selection appears on tinymce buttons and plugin's page,
but the drualbreak button dosen't show up on editor.
This the way i added it on plugin_reg.php.

$plugins['zoom'] = array();
$plugins['zoom']['theme_advanced_buttons2'] = array('zoom');

$plugins['drupalbreak'] = array();
$plugins['drupalbreak']['theme_advanced_buttons3'] = array('drupalbreak');

return $plugins;
}

Could anyone give me an idea? I checked many times patched files and all seems well done (to me).

P.S. I'm attaching my modified files, if anyone could give them a look. and the screenshots of the plugin selection page ad of the tinymce editor bar.

Many thanks for support.

komodo_1’s picture

komodo_1 commented

I forgotten to say many things.
sorry.
i try to complete my support request:
I'm using drupal 5.6 and last tinymce module release for tinymce (5.x-1.9)
And i'm showing the content in homepage using panel2+views.
I tryed to apply manually the

command inside post using html button, but it dosen't still works.

Sorry for re-posting to add this.
thanks again

jazzitup’s picture

jazzitup commented
Version: master » 5.x-1.9
Category: bug » support

How could I use this patch for TinyMCE 3.x (for my Drupal v5.7)? I succeeded with enabling TinyMCE3 to work with my Drupal5 installation, but this feature of a teaser adjusting seems essential to me.

I've tried the patch mentioned from above and it does show up in my "Buttons and plugins" section of a TinyMCE settings, but it doesn't show up in my rich-text editor as an icon...

seutje’s picture

seutje commented

I have pretty much the same problem:

I need to use tinyMCE 3.x so the spellchecker would work properly, but I also need drupalbreak to work, which doesn't seem to want to in 3.x :(

tflmike’s picture

tflmike commented

Yes... same problem here too! I have Drupal 5, TinyMCE3 and I've tried to use the Drupalbreak module to no avail!

Anyone have any clue how to make this work?

nicoloye’s picture

nicoloye commented
Issue summary: View changes
Status: Needs review » Closed (outdated)