The problem is that we have a website full of cool and useful shortcodes for our client to use, but Tinymce adds <p>s arround shortcodes and if you have a block element in it, it's not semantic at all and the code wont be valid.
Researching i found the following solutions:
- Make your .ss file one line long (doesn't work) - User javascript to hide empty <p> tags (what?) - Use margin-bottom:0; on <p> (why?)
Do you agree or disagree with my solution, any other solution? Keen to hear from you guys.
> The problem is that we have a website full of cool and useful shortcodes for our client to use, but Tinymce adds <p>s arround shortcodes and if you have a block element in it, it's not semantic at all and the code wont be valid.
> Researching i found the following solutions:
> Make your .ss file one line long (doesn't work)
> User javascript to hide empty <p> tags (what?)
> Use margin-bottom:0; on <p> (why?)
> Do you agree or disagree with my solution, any other solution? Keen to hear from you guys.
Thanks for posting here. To summarise my concern, the problem stems from the fact that <p> tags are the correct behaviour for the WYSIYWG editor: the user ends up laying out their code within a WYSIWYG view but the code is interpreted as an HTML stream.
So a user types this:
[shortcode]
something inside the shortcode
[/shortcode]
But the code is operating on something like this:
<p>[shortcode]</p>
<p>something inside the shortcode</p>
<p>[/shortcode]</p>
I felt that trying to make this situation work ends up relying on top much magic, and that instead we should leave shortcodes designed to be coded up inside the HTML view and not allow for entry of code into the WYSIWYG view. This does severely limit shortcodes' utility, but I thought any alternative would diminish the overall reliability of the system.
Although I don't necessarily agree with Sam that the answer is just not
using shortcodes inside the WYSIWYG editor, I don't really like the "every
p tag gets swallowed magically" method - I agree with Sam that's it's
edge-case-specific magic that's likely to cause confusion.
A couple of things I think might be OK:
- Have shortcodes indicate that they swallow their containing tag. Then
when you do [swallowing_tag] it will always swallow the immediately
surrounding parent.
- Have a HTML equivalent for shortcodes, so you can do <div
data-shortcode="YouTube XXXX">....</div> which TinyMCE wouldn't surround
with <p> tags. Would probably need a plugin for TinyMCE to actually enter
via the WYSIWYG form.
That's not magic at all, it's a solution to a problem that exists and maybe it's not just me, could be a struggle of others developers too, i know a website that implements javascript to hide empty <p> tags to overcome the problem in SS.
Shortcode is a powerfull feature and seems really backwards to disable it for WYSIWYG content... They can be used for so many good things such as:
- - Column Layouts
- Images
- Galleries
- Buttons
- Message Box
- Pullquote and Blockquote
- Content Toggle and Tabs
- List styles and Dropcaps
- Tables
- Recent Posts
- Dividers
And many others...
By default that's what WYSIWYG editors do, and i think it's fine, just trying to find a solution to be able to add shortcode using WYSIWYG content and have your HTML markup clean, valid and semantic.
> The problem is that we have a website full of cool and useful shortcodes > for our client to use, but Tinymce adds <p>s arround shortcodes and if you > have a block element in it, it's not semantic at all and the code wont be > valid.
> Researching i found the following solutions:
> - Make your .ss file one line long (doesn't work)
> - User javascript to hide empty <p> tags (what?)
> - Use margin-bottom:0; on <p> (why?)
> Do you agree or disagree with my solution, any other solution? Keen to > hear from you guys.
> Thanks for posting here. To summarise my concern, the problem stems from > the fact that <p> tags are the correct behaviour for the WYSIYWG editor: > the user ends up laying out their code within a WYSIWYG view but the code > is interpreted as an HTML stream.
> So a user types this:
> [shortcode]
> something inside the shortcode
> [/shortcode]
> But the code is operating on something like this:
> <p>[shortcode]</p>
> <p>something inside the shortcode</p>
> <p>[/shortcode]</p>
> I felt that trying to make this situation work ends up relying on top much > magic, and that instead we should leave shortcodes designed to be coded up > inside the HTML view and not allow for entry of code into the WYSIWYG view. > This does severely limit shortcodes' utility, but I thought any > alternative would diminish the overall reliability of the system.
On Wednesday, October 3, 2012 4:23:46 PM UTC+13, Hamish Friedlander wrote:
> Although I don't necessarily agree with Sam that the answer is just not > using shortcodes inside the WYSIWYG editor, I don't really like the "every > p tag gets swallowed magically" method - I agree with Sam that's it's > edge-case-specific magic that's likely to cause confusion.
> A couple of things I think might be OK:
> - Have shortcodes indicate that they swallow their containing tag. Then > when you do [swallowing_tag] it will always swallow the immediately > surrounding parent.
> - Have a HTML equivalent for shortcodes, so you can do <div > data-shortcode="YouTube XXXX">....</div> which TinyMCE wouldn't surround > with <p> tags. Would probably need a plugin for TinyMCE to actually enter > via the WYSIWYG form.
> It's not every <p> tag, but just <p> tags around the shortcode.
> Like
> <p>[shortcode]Content[/shortcode]</p>
> TO
> [shortcode]Content[shortcode]
Some shortcodes might need to be in <p> tags though - some produce inline
HTML elements, or text, or <div> tags that expect to be within <p> tags for
styling to work.
Anything is magic if it happens without any apparent cause. Assume that the
above is true, and you did want a <p> tag - how would you debug why they
just seem to disappear?
Detangling that last example to do what the content editor intended is very
difficult.
The more I think about it, the more I think the only option is to use HTML
elements for adding shortcodes if you want them to work in the WYSIWYG
editor.
> that's not magic at all, it's a solution to a problem that exists
The "magic" comes if we want to get this code to handle all the cases that are going to come up:
<p>[shortcode]</p>
<p>something inside the shortcode</p>
<p>[/shortcode]</p>
<p>[shortcode]<br>
something inside the shortcode<br>
<p>[/shortcode]</p>
<p><br>
[shortcode]<br>
something inside the shortcode<br>
<p>[/shortcode]</p>
<p><br>
[shortcode]</p>
<p>something inside the shortcode</p>
<p>[/shortcode]</p>
<div>[shortcode]</div>
<p>something inside the shortcode</p>
<p>[/shortcode]</p>
<span style="display: block">[shortcode]</span>
<p>something inside the shortcode</p>
<p>[/shortcode]</p>
I'm sure there are more, this was just off the top of my head.
If we don't get it to handle all of these situations, we'll just have another solution that breaks confusingly half the time people try to do things with it.
> - Have a HTML equivalent for shortcodes, so you can do <div data-shortcode="YouTube XXXX">....</div> which TinyMCE wouldn't surround with <p> tags. Would probably need a plugin for TinyMCE to actually enter via the WYSIWYG form.
This sounds like a much better thing to dig into, particularly if the WYSIWYG editor had some support for this.
> I'm sure there are more, this was just off the top of my head.
> If we don't get it to handle all of these situations, we'll just have
> another solution that breaks confusingly half the time people try to do
> things with it.
> --
> You received this message because you are subscribed to the Google Groups
> "SilverStripe Core Development" group.
> To post to this group, send email to silverstripe-dev@googlegroups.com.
> To unsubscribe from this group, send email to
> silverstripe-dev+unsubscribe@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/silverstripe-dev?hl=en.
Obviously you guys are friends, my point is not around my solution but yes to at this point in time shortcodes have problem with the Tinymce editor, and if that is a better solution we should definitely implement it, but it would generate an issue with end users that doesn't know HTML and they would need to remember to user [shortcode] for HTML content and <div data-shortcode="shortcode"></div> for WYSIWYG content.
>> I'm sure there are more, this was just off the top of my head.
>> If we don't get it to handle all of these situations, we'll just have >> another solution that breaks confusingly half the time people try to do >> things with it.
>> -- >> You received this message because you are subscribed to the Google Groups >> "SilverStripe Core Development" group.
>> To post to this group, send email to silverst...@googlegroups.com<javascript:>
>> .
>> To unsubscribe from this group, send email to >> silverstripe-d...@googlegroups.com <javascript:>.
>> For more options, visit this group at >> http://groups.google.com/group/silverstripe-dev?hl=en.
Heh, yeah, we've worked together for a few years - Hamish is CTO of SilverStripe Ltd and I'm CEO. I was CTO a couple of years back.
> my point is not around my solution but yes to at this point in time shortcodes have problem with the Tinymce editor, and if that is a better solution we should definitely implement it, but it would generate an issue with end users that doesn't know HTML and they would need to remember to user [shortcode] for HTML content and <div data-shortcode="shortcode"></div> for WYSIWYG content.
I think we'd deprecate the shortcodes altogether. Shortcodes aren't useful in and of themselves; they're a simple way of adding an extension point to build plugins for the CMS content. I don't think it's the best one.
The <div data-shortcode="shortcode"></div> approach would only make sense if there was a plugin to the WYSIWYG editor for injecting them into the HTML. Presumably, the editor would give them some kind of styling. However, in that case you'd have a UI for inserting these into the content instead of having to remember shortcode syntax.
> I'm sure there are more, this was just off the top of my head.
> If we don't get it to handle all of these situations, we'll just have > another solution that breaks confusingly half the time people try to do > things with it.
> Frankly you guys are not helping at all, i'm just trying to help/contribute and get a solution for my problem, we are arguing for nothing.
> How someone would take a company serious if they are not listening to developers and community?
I'm sorry you feel that way, I've done my best to explain the issues that I see with your solution. I've spent a good chunk of the afternoon trying to help you with this, but you consistently deny that there's an issue.
> Yes that are hundreds of cases but the only one to concern about is this two
> [shortcode]Content[/shortcode]
> that generates
> <p>[shortcode]Content/[shortcode]</p>
> and
> [shortcode]
> Content
> [/shortcode]
> that generates
> <p>[shortcode]</p>
> <p>Content</p> (this <p> should be here)
> <p>[/shortcode]</p>
> as the user would only type in
> [shortcode]Content[/shortcode]
> or
> [shortcode]
> Content
> [/shortcode]
WYSIWYG editors end up being much more fiddly than this: you have to deal with a wide variety of browsers, users copy/pasting content, entering content into an existing page and that content. The way to make a robust system is to address the kinds of edge cases that I raised.
Sorry Sam if i didn't expressed myself quite well.
I'm not denying anything i'm not saying that my solution should be implemented, it was stupid of me to pull a request.
I've just made a solution that kind of worked for me, you actually pointed out some issues which i'm working on and trying to fix.
I'm just pointing out an issue with shortcodes and trying to find a solution for it, specially with you guys who created SS, you guys understand it more than anyone else .
I also spent most of my afternoon trying to fix this issue and explain to you that there is an issue with shortcodes and tinymce.
I'm trying to contribute with SS and get my job done, but you guys are just not getting what i'm saying or have a really close mind about shortcodes.
Before you say anything else, i know that Tinymce works as it should i know shorcodes works too, what i'm saying is that adding a shortcode to tinymce generates an issue, that's where the problem lives, tinymce adds a <p> around it and it's not good for HTML markup, specially if your shortcode returns a block element.
consider the following situation:
You have a simple page and the content of this page is a WYSIWYG content, how would you implement a nice little and easy to remember code/feature for the final client that doesn't know any HTML to implement which return a quite big chuck of HTML and inserts it wherever the end client added it into the editor. the best solution i know is by using shortcodes, is there anything else you could do?
Hi guys
Interesting - and very fast paced - discussion :-) I for one would be sorry to see the shortcodes go, as they are the one way for a user to place some dynamic stuff, like a small form, into the content area. And since there is no obligation to use them, why not keep them :-)
My question is, should we cater for every possible way a user could mess up? Like shortcodes in headers, td, lists? I think not. First of all, most users that use the WYSIWYG, know after a while that it's not always absolutely reliable nor user-friendly.
You may approach any user in two ways: restrict or educate (though most time it'll be some balance of the two). So if you do allow your user to use shortcodes at all, you sort of automatically need to provide some education as to how. Just take it one step further and explain where and in what manner to place them (and to try again if things get weird). That is one thing.
The next is the complexity of the shortcodes used - and here it's really up to the developer. I tend to keep away from shortcodes where the user can add their own content - as it can lead to really unexpected outcomes. There are often other ways (like for instance providing a textfield for that). But anyway, if for example, the user knows how to keep the codes on a single line, then you could (and possibly should) effectively remove every other bit of HTML from the start and the finish of that line. That magic would work for me - and maybe it could even be optional…
Martine
Op woensdag 3 oktober 2012 04:58:40 UTC+2 schreef akbortoli het volgende:
> The problem is that we have a website full of cool and useful shortcodes > for our client to use, but Tinymce adds <p>s arround shortcodes and if you > have a block element in it, it's not semantic at all and the code wont be > valid.
> Researching i found the following solutions:
> - Make your .ss file one line long (doesn't work)
> - User javascript to hide empty <p> tags (what?)
> - Use margin-bottom:0; on <p> (why?)
> Do you agree or disagree with my solution, any other solution? Keen to > hear from you guys.
On many occasions the TinyMCE editor is not enough to make complex formats, so I'm developing a special system based on shortcodes. The problem I have had, as akbortoli says, are <p>[shortcode]</ p>. To remove them simply I have done an intelligent filtering (only surrounding the shortcodes) when save a record to the database using augmentWrite in a Decorator. For now it works pretty well. :) But surely, this functionality should be in the SilverStripe core.
I very much liked the idea of having a tinymce plugin handle insertion of shortcodes or macros, as I agree that it would be very beneficial to have this additional feature (for many of the reasons that akbortoli mentioned).
That would also be a lot more user friendly, e.g. you could choose "insert macro" in the menu, and could be presented with a list of available macros. Under the hood we could still use shortcodes.
If I'm not remembering wrongly there was an option like this when I used the CMS "Umbraco" quite some years ago - I think it was also using tinymce.
I had a look trying to find that kind of plugins for tinymce, but didn't have much luck. Does anyone know if something like this exist?
I think this would be a good idea for a module.
> Before you say anything else, i know that Tinymce works as it should i know shorcodes works too, what i'm saying is that adding a shortcode to tinymce generates an issue, that's where the problem lives, tinymce adds a <p> around it and it's not good for HTML markup, specially if your shortcode returns a block element.
> consider the following situation:
> You have a simple page and the content of this page is a WYSIWYG content, how would you implement a nice little and easy to remember code/feature for the final client that doesn't know any HTML to implement which return a quite big chuck of HTML and inserts it wherever the end client added it into the editor. the best solution i know is by using shortcodes, is there anything else you could do?
> the content may look like this:
> long content
> [shortcode]
> rest of the content
> keep it simple and easy to the client to use.
> -- > You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/kQn4TyAZ66EJ.
> To post to this group, send email to silverstripe-dev@googlegroups.com.
> To unsubscribe from this group, send email to silverstripe-dev+unsubscribe@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.
What I've been meaning to look at is a system similar to Insert Gallery in WordPress.
They have a button that opens a media popup like SS3 has but you can insert a gallery which gets put in the content's HTML as the [gallery] shortcode but gets displayed in TinyMCE as a placeholder image. I think it uses TinyMCE's onPostProcess() event. Focusing the placeholder gives you buttons to edit or delete the gallery. Editing it sets properties on the shortcode (eg [gallery columns="1"]).
It would be great to try distill that kind of functionality down to something reusable. Like an Insert Google Map button that has an address field in the popup.
On 4/10/2012 3:27 a.m., Anselm Christophersen wrote:
> I very much liked the idea of having a tinymce plugin handle insertion of shortcodes or macros, as I agree that it would be very beneficial to have this additional feature (for many of the reasons that akbortoli mentioned).
> That would also be a lot more user friendly, e.g. you could choose "insert macro" in the menu, and could be presented with a list of available macros. Under the hood we could still use shortcodes.
> If I'm not remembering wrongly there was an option like this when I used the CMS "Umbraco" quite some years ago - I think it was also using tinymce.
> I had a look trying to find that kind of plugins for tinymce, but didn't have much luck. Does anyone know if something like this exist?
> I think this would be a good idea for a module.
> Thanks
> Anselm
> On 03/10/2012, at 08.24, akbortoli wrote:
>> Before you say anything else, i know that Tinymce works as it should i know shorcodes works too, what i'm saying is that adding a shortcode to tinymce generates an issue, that's where the problem lives, tinymce adds a <p> around it and it's not good for HTML markup, specially if your shortcode returns a block element.
>> consider the following situation:
>> You have a simple page and the content of this page is a WYSIWYG content, how would you implement a nice little and easy to remember code/feature for the final client that doesn't know any HTML to implement which return a quite big chuck of HTML and inserts it wherever the end client added it into the editor. the best solution i know is by using shortcodes, is there anything else you could do?
>> the content may look like this:
>> long content
>> [shortcode]
>> rest of the content
>> keep it simple and easy to the client to use.
>> -- >> You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
>> To view this discussion on the web visit https://groups.google.com/d/msg/silverstripe-dev/-/kQn4TyAZ66EJ.
>> To post to this group, send email to silverstripe-dev@googlegroups.com.
>> To unsubscribe from this group, send email to silverstripe-dev+unsubscribe@googlegroups.com.
>> For more options, visit this group at http://groups.google.com/group/silverstripe-dev?hl=en.
Although I forgot to mention that the problem with just having a straight up button in TinyMCE is that most of the shortcodes I use are page-specific (like the form one on a user defined form) and experience tells me that SilverStripe isn't really made for page-specific TinyMCE configurations.
> What I've been meaning to look at is a system similar to Insert > Gallery in WordPress.
> They have a button that opens a media popup like SS3 has but you can > insert a gallery which gets put in the content's HTML as the [gallery] > shortcode but gets displayed in TinyMCE as a placeholder image. I > think it uses TinyMCE's onPostProcess() event. Focusing the > placeholder gives you buttons to edit or delete the gallery. Editing > it sets properties on the shortcode (eg [gallery columns="1"]).
> It would be great to try distill that kind of functionality down to > something reusable. Like an Insert Google Map button that has an > address field in the popup.
> On 4/10/2012 3:27 a.m., Anselm Christophersen wrote:
>> I very much liked the idea of having a tinymce plugin handle >> insertion of shortcodes or macros, as I agree that it would be very >> beneficial to have this additional feature (for many of the reasons >> that akbortoli mentioned).
>> That would also be a lot more user friendly, e.g. you could choose >> "insert macro" in the menu, and could be presented with a list of >> available macros. Under the hood we could still use shortcodes.
>> If I'm not remembering wrongly there was an option like this when I >> used the CMS "Umbraco" quite some years ago - I think it was also >> using tinymce.
>> I had a look trying to find that kind of plugins for tinymce, but >> didn't have much luck. Does anyone know if something like this exist?
>> I think this would be a good idea for a module.
>> Thanks
>> Anselm
>> On 03/10/2012, at 08.24, akbortoli wrote:
>>> Before you say anything else, i know that Tinymce works as it should >>> i know shorcodes works too, what i'm saying is that adding a >>> shortcode to tinymce generates an issue, that's where the problem >>> lives, tinymce adds a <p> around it and it's not good for HTML >>> markup, specially if your shortcode returns a block element.
>>> consider the following situation:
>>> You have a simple page and the content of this page is a WYSIWYG >>> content, how would you implement a nice little and easy to remember >>> code/feature for the final client that doesn't know any HTML to >>> implement which return a quite big chuck of HTML and inserts it >>> wherever the end client added it into the editor. the best solution >>> i know is by using shortcodes, is there anything else you could do?
>>> the content may look like this:
>>> long content
>>> [shortcode]
>>> rest of the content
>>> keep it simple and easy to the client to use.
>>> -- >>> You received this message because you are subscribed to the Google >>> Groups "SilverStripe Core Development" group.
>>> To view this discussion on the web visit >>> https://groups.google.com/d/msg/silverstripe-dev/-/kQn4TyAZ66EJ.
>>> To post to this group, send email to silverstripe-dev@googlegroups.com.
>>> To unsubscribe from this group, send email to >>> silverstripe-dev+unsubscribe@googlegroups.com.
>>> For more options, visit this group at >>> http://groups.google.com/group/silverstripe-dev?hl=en.
