TinyMCE Quattro and its wysiwyg bbcodes

TinyMCE Quattro and its wysiwyg bbcodes 2.7.2

No permission to download
Overview FAQ Updates (83) Reviews (32) History Discussion
jauburn said:
I can never get the table editor button to show up using the button manager. It put the table button on the LTR editor, save, but when I go to post something, the button is not there.

Is there a trick to getting the table button to work?
Click to expand...
You need to go to the options of "TinyQuattro - Wysiwyg bb codes" and enable the table Bb Code.
 
cclaerhout said:
You need to go to the options of "TinyQuattro - Wysiwyg bb codes" and enable the table Bb Code.
Click to expand...

Got it. I've played around with the table insert command. I see a number of vital table formatting options that are missing. Examples:
  • Vertical cell alignment is missing. The "alignment" option refers only to horizontal cell alignment. (I need vertical top, for example, for almost everything I do in a table.)
  • Border thickness adjustment doesn't work: setting to 0 does not turn off table border
  • Can tinymce recognize or replicate standard html table formatting features?
Another observation: Add a two column table. Apply center formatting to the first. Now move to the second column and try to apply some justification (right, whatever). You can't until you save the post and then re-enter.
 
Last edited:
@jauburn
  • The Table User Interface is the one developped by TinyMCE. I will not modified it (see the point 4 of the FAQ)
  • The Bb Code table supports these html tags and their individual properties
    They might not be in the User Interface but still available in the direct Bb Code parsing (again, see the point 4 of the FAQ).
    The vertical alignement is available for these special tags: Thead, Tbody, Tfoot, Colgroup, Col, Tr, Th, Td. To enable it, just use one of the four keywords:
    1. bottom
    2. middle
    3. top
    4. baseline
    Github reference (arround line 570).

    P.S: The vertical alignement is done by css. It's not using the valign property that seems no more compatible with html5 standard.
  • The border management might depend on the "border-collapse" css property, which is already set by XenForo parent elements. That's one of the reasons why this addon comes with 4 skins you can customize in this addon Style properties to standardized the layout. The first two skins have a "collapse" border-collapse, the last two ones have a "separate" border-collapse. Do your own tests to suit your needs.
  • The cell/row configuration must be done by their own properties inside the user interface. To access them, use the TinyMCE context menu (available on right click if you have enabled it) or select your row/cell and click on the table button. I have no problem with them (but I'm not using IE).
 
cclaerhout said:
@jauburn
  • The Table User Interface is the one developped by TinyMCE. I will not modified it (see the point 4 of the FAQ)
  • The Bb Code table supports these html tags and their individual properties
    They might not be in the User Interface but still available in the direct Bb Code parsing (again, see the point 4 of the FAQ).
    The vertical alignement is available for these special tags: Thead, Tbody, Tfoot, Colgroup, Col, Tr, Th, Td. To enable it, just use one of the four keywords:
    1. bottom
    2. middle
    3. top
    4. baseline
    Github reference (arround line 570).

    P.S: The vertical alignement is done by css. It's not using the valign property that seems no more compatible with html5 standard.
  • The border management might depend on the "border-collapse" css property, which is already set by XenForo parent elements. That's one of the reasons why this addon comes with 4 skins you can customize in this addon Style properties to standardized the layout. The first two skins have a "collapse" border-collapse, the last two ones have a "separate" border-collapse. Do your own tests to suit your needs.
  • The cell/row configuration must be done by their own properties inside the user interface. To access them, use the TinyMCE context menu (available on right click if you have enabled it) or select your row/cell and click on the table button. I have no problem with them (but I'm not using IE).
Click to expand...

Thanks for the explanation. I just can't understand why the default behavior of text in cells is vertically center aligned. Who wants text in a table to appear that way? And there's no easy way to change the vertical alignment, either.

table.webp

Given the very limited layout options available through HTML, people have relied for years on tables to introduce some type of sophistication to layouts. This TinyMCE implementation of tables is frustrating because it gets you just halfway there with the controls it provides.
 
@jauburn
This is the standard html way to render tables. See this example: http://jsfiddle.net/JVrE8/
Again, if you want to change this, you can edit the "TD" visual options in the XenForo style properties and use a different vertical align.
 

Attachments

  • demo.webp
    demo.webp
    55 KB · Views: 8
And if you want to change only a cell, just use the Bb Code editor and add one of the vertical key word as an option. Example with a top vertical align on the first cell.
Code: 
[xtable=skin1|580x217]
{tbody}
{tr}
{td=top}Test 1{/td}
{/tr}
{tr}
{td}Test 2{/td}
{/tr}
{/tbody}
[/xtable]
 
cclaerhout said:
And if you want to change only a cell, just use the Bb Code editor and add one of the vertical key word as an option. Example with a top vertical align on the first cell.
Code: 
[xtable=skin1|580x217]
{tbody}
{tr}
{td=top}Test 1{/td}
{/tr}
{tr}
{td}Test 2{/td}
{/tr}
{/tbody}
[/xtable]
Click to expand...

Thanks. That was helpful, and I now know how to get vertical alignment.

Could you clarify for me what I need to edit, exactly, to get the borders to 0 out--no lines?

I'm using the gray style.

It's odd that in Table Properties, there's a Border box, but when you enter 0 in it and press OK, nothing happens.

Thanks!
 
jauburn said:
Thanks. That was helpful, and I now know how to get vertical alignment.

Could you clarify for me what I need to edit, exactly, to get the borders to 0 out--no lines?

I'm using the gray style.

It's odd that in Table Properties, there's a Border box, but when you enter 0 in it and press OK, nothing happens.

Thanks!
Click to expand...

I've checked and I've corrected a part of the code to allow "0" value to be used when the html code is converted to Bb Code (happens when you save a message).

But even with this fix, to be able not to see any border, you will probably need to modify at least the TD css of one of your table skins. You can put this in the extra css (see my above example with the vertical:
Code: 
border-width: 0;

The reason: XenForo default css automatically apply a border of 1 on the td elements (this is normal). So once the fix released, if you set 0 to the border of the table, this will not override the default css border for td elements. One solution is to apply the 0 border to all cells using the TinyMCE user interface. The other is the one given above, using the css.

The manual fix: edit this file
At line 525, replace
Code: 
if(empty($value))
with
Code: 
if((empty($value) && !is_numeric($value)))

I will release anyway an update today. I've added a few things to this addon the past days.
 
cclaerhout updated TinyMCE Quattro and its wysiwyg bbcodes with a new update entry:

Version 1.7.1.1 released

Version 1.7.1.1 released

  • The font family and font size buttons are now adaptive. They will change into small icons on small screens (see screenshot)
  • If you've chosen to display smilies below the editor and you're using the fullscreen mode, the smilies will load in a TinyMCE modal window instead
  • Table Bb Code options now support 0 value. Thanks to Jauburn.
  • New icons in the XenForo set (see screenshot)
    It will might require to update your browser cache to see them....
Click to expand...

Read the rest of this update entry...
 
The font family and font size buttons are now adaptive. They will change into small icons on small screens (see screenshot)
Click to expand...

In the interest of making the button bar take up as little space as possible, even on larger screens, would it be possible to give users the option of using the small font family and font size buttons all the time?
 
jauburn said:
In the interest of making the button bar take up as little space as possible, even on larger screens, would it be possible to give users the option of using the small font family and font size buttons all the time?
Click to expand...
It can be done, but one of the advantage of TinyMCE is to display what text size or family are selected by nodes; same thing for color. For the font size, I could find a workaround to display an integer at the right of the icon, but the code will become more complex. And for the font family, it can't really be done. I could display the font name in the tooltip, but it will not work on mobile and won't be really intuitive.

Since I hate not to be able to directly the active font size/family (like on Redactor), I can't say I'm very enthusiast to do the same thing on Mce, especially on large screens where the size of the editor is not a problem.
 
cclaerhout said:
It can be done, but one of the advantage of TinyMCE is to display what text size or family are selected by nodes; same thing for color. For the font size, I could find a workaround to display an integer at the right of the icon, but the code will become more complex. And for the font family, it can't really be done. I could display the font name in the tooltip, but it will not work on mobile and won't be really intuitive.

Since I hate not to be able to directly the active font size/family (like on Redactor), I can't say I'm very enthusiast to do the same thing on Mce, especially on large screens where the size of the editor is not a problem.
Click to expand...

Not a biggie. Just thought that some might like this.
 
So a member of ours brought this to my attention, apparently after he tag's someone with the BD tagme plugin we have on 1.2.4, the rest of his text written in the editor gets removed after he posts it.
 
Spawne32 said:
So a member of ours brought this to my attention, apparently after he tag's someone with the BD tagme plugin we have on 1.2.4, the rest of his text written in the editor gets removed after he posts it.
Click to expand...
It might be better to contact Xfrocks directly then in his resource post.

jauburn said:
Not a biggie. Just thought that some might like this.
Click to expand...
It will be in the next version. I've improved quite a few things anyway.
 
cclaerhout said:
It might be better to contact Xfrocks directly then in his resource post.


It will be in the next version. I've improved quite a few things anyway.
Click to expand...

lol you say this about every plugin related problem, and then the designer of those plugins tell me to contact cclaerhout about tinymce quattro
 
cclaerhout said:
Where have I already said this, could you source me please ?
You tell me that the BD tagme plugin seems to have problems, it just seems logical to ask first the author of the addon.


@jauburn
New version on Github.
Click to expand...

No, i told you that tinymce seems to have problems. The tagme system works fine. lol the editor is cutting off text after you put the tagme command in. @Username followed by text.
 
Spawne32 said:
No, i told you that tinymce seems to have problems. The tagme system works fine. lol the editor is cutting off text after you put the tagme command in. @Username followed by text.
Click to expand...

You need to change your tone and attitude and cut this guy some slack. He has performed a great service in supplying this editor for free (although I have donated several times and encourage others to do so...otherwise, shut up). And the support is outstanding.
 
You must log in or register to reply here.
Top Bottom