I had posted this in a related topic about custom templates (added through the template plugin in TinyMCE) but I thought this might warrant its own post.
I had implemented templates a while back in TinyMCE so that users could add a bit more complex HTML without having to know HTML. Such as styled Divs with headings, rounded borders, etc. Users could use these templates to highlight certain bits of content on a page.
Unfortunately, I did most of my
testing in FireFox. When testing in IE 7 or 8, I'm finding that pressing enter in these
templates breaks the structure.
One of our templates, for example is "Blue Highlight Box" (blue
background, rounded borders, white text). The code inserted is as
follows:
This works fine if you just insert, save, and go along your merry way, but if I try to do a carriage return after the
unordered list, it breaks the HTML for the DIV. Alternatively, backspacing
into the unordered list will do the same. The resulting HTML ends up
being:
The more I try to fix it in the TinyMCE editor the worse it gets. Eventually the DIV gets removed totally and sometimes the class blue_highlight_box gets applied to all of the other elements, causing them to have a margin between them.
I've tried to turn Tidy off to see if that would help, but no dice. I think Tidy only runs on save anyway. Has anyone run into this behavior? FireFox and Chrome seem to work fine.
I've tried using tables instead of a DIV structure and it works fine, but using tables everywhere without having tabular data seems to be bad form. The designer on my team would have an anneurism. ;)
Hmm...yeah, doing templating in RTE seems to be a bitch and with good reason since layout should not be handled by the RTE property. But when using the template plugin I suppose it should however be possible...I guess it's a matter of hooking into tinymce to make sure the empty paragraphs are not made...
However I'm thinking if there perhaps is a better way for you to achieve the desired result? Is there any specific reason that you need to have the layout elements in the RTE?
The client needs to be able to insert these templates within content they're entering into the editor. I can't think of a better way to do this. Would it be the empty paragraph tags be causing this? It's moving the h-tag right out of the structure, and if I keep trying to edit that block it eventually removes the DIV altogether.
Addition: I also tried removing the ability to create empty paragraphs and that didn't seem to do much of anything.
Hmm...would it be possible to create some true/false properties in order to make them select the desired "template" this way?
So if you for instance have two templates/possible ways to show the content you could tick either "red" or "blue" and then the desired template is generated automatically?
This would of course require you use a textfield property for the heading...but then it should be possible, no?
I'm not sure I'm following. There isn't a specific "page" template or layout they'll be selecting from. They'll be entering content for the interior layout and can insert these mini templates anywhere in their content. These mini templates are to highlight blocks of HTML, create captioned images, etc. There are about a dozen templates for them to choose from.
Hmm...ok...then the suggestion above is not an option.
Ehm...don't know how to deal with this issue then. Perhaps one of the other bright minds in here knows how to make it work...I'm out of ideas...Unless it's an option to rethink the way you're dealing with this (and I guess it's not :))
a) Remove the templates and hope the client doesn't notice they're gone. ;) b) Make them use FireFox
I've also toyed around with using a single-celled table instead of a DIV (as this seems to work) and if I could hijack the beforepublish event, using some regex, I could replace those tables with DIVs. Not sure if that's the route I want to go yet, or if I can even do that.
Thanks for your help! I'll keep plugging away at it.
I noticed that our designer had other TinyMCE templates that weren't causing the client any grief (just as I was breaking down to convert everything to tables, too). After investigating I realized that the width attribute on the CSS class for the DIVs was what was causing some of the other templates to work. I added width: 100%; to the CSS for each colored block you see below, and that allowed TinyMCE to recognize the DIV as a block that has handles, so I can drag it, resize it, etc. To edit the conent I was able to double-click in, and pressing enter or backspace no longer breaks everything.
I won't admit how long I spent on this issue. ;) I was looking in all of the wrong places for a solution.
Great to hear you figured the solution out - must be a big relieve :-)
When you have the time it would be great if you could break your solution down in some further steps - perhaps it would be a good idea to document this in the wiki so others can benefit?
TinyMCE - DIV content breaks when pressing enter in Internet Exploer 7 & 8
Hey All
I had posted this in a related topic about custom templates (added through the template plugin in TinyMCE) but I thought this might warrant its own post.
I had implemented templates a while back in TinyMCE so that users could add a bit more complex HTML without having to know HTML. Such as styled Divs with headings, rounded borders, etc. Users could use these templates to highlight certain bits of content on a page.
Unfortunately, I did most of my testing in FireFox. When testing in IE 7 or 8, I'm finding that pressing enter in these templates breaks the structure.
One of our templates, for example is "Blue Highlight Box" (blue background, rounded borders, white text). The code inserted is as follows:
This works fine if you just insert, save, and go along your merry way, but if I try to do a carriage return after the unordered list, it breaks the HTML for the DIV. Alternatively, backspacing into the unordered list will do the same. The resulting HTML ends up being:
The more I try to fix it in the TinyMCE editor the worse it gets. Eventually the DIV gets removed totally and sometimes the class blue_highlight_box gets applied to all of the other elements, causing them to have a margin between them.
I've tried to turn Tidy off to see if that would help, but no dice. I think Tidy only runs on save anyway. Has anyone run into this behavior? FireFox and Chrome seem to work fine.
I've tried using tables instead of a DIV structure and it works fine, but using tables everywhere without having tabular data seems to be bad form. The designer on my team would have an anneurism. ;)
Thanks,
Jay
Hi Jay
Hmm...yeah, doing templating in RTE seems to be a bitch and with good reason since layout should not be handled by the RTE property. But when using the template plugin I suppose it should however be possible...I guess it's a matter of hooking into tinymce to make sure the empty paragraphs are not made...
However I'm thinking if there perhaps is a better way for you to achieve the desired result? Is there any specific reason that you need to have the layout elements in the RTE?
/Jan
Hi Jan,
The client needs to be able to insert these templates within content they're entering into the editor. I can't think of a better way to do this. Would it be the empty paragraph tags be causing this? It's moving the h-tag right out of the structure, and if I keep trying to edit that block it eventually removes the DIV altogether.
Addition: I also tried removing the ability to create empty paragraphs and that didn't seem to do much of anything.
Thanks,
Jay
Hi Jay...
Hmm...would it be possible to create some true/false properties in order to make them select the desired "template" this way?
So if you for instance have two templates/possible ways to show the content you could tick either "red" or "blue" and then the desired template is generated automatically?
This would of course require you use a textfield property for the heading...but then it should be possible, no?
/Jan
I'm not sure I'm following. There isn't a specific "page" template or layout they'll be selecting from. They'll be entering content for the interior layout and can insert these mini templates anywhere in their content. These mini templates are to highlight blocks of HTML, create captioned images, etc. There are about a dozen templates for them to choose from.
Hi Jay
Hmm...ok...then the suggestion above is not an option.
Ehm...don't know how to deal with this issue then. Perhaps one of the other bright minds in here knows how to make it work...I'm out of ideas...Unless it's an option to rethink the way you're dealing with this (and I guess it's not :))
/Jan
a) Remove the templates and hope the client doesn't notice they're gone. ;)
b) Make them use FireFox
I've also toyed around with using a single-celled table instead of a DIV (as this seems to work) and if I could hijack the beforepublish event, using some regex, I could replace those tables with DIVs. Not sure if that's the route I want to go yet, or if I can even do that.
Thanks for your help! I'll keep plugging away at it.
p.s.: Stupid Internet Explorer
I have a solution!
I noticed that our designer had other TinyMCE templates that weren't causing the client any grief (just as I was breaking down to convert everything to tables, too). After investigating I realized that the width attribute on the CSS class for the DIVs was what was causing some of the other templates to work. I added width: 100%; to the CSS for each colored block you see below, and that allowed TinyMCE to recognize the DIV as a block that has handles, so I can drag it, resize it, etc. To edit the conent I was able to double-click in, and pressing enter or backspace no longer breaks everything.
I won't admit how long I spent on this issue. ;) I was looking in all of the wrong places for a solution.
Thanks for your help Jan!
Hi Jay
Great to hear you figured the solution out - must be a big relieve :-)
When you have the time it would be great if you could break your solution down in some further steps - perhaps it would be a good idea to document this in the wiki so others can benefit?
/Jan
is working on a reply...