TinyMCE Quattro and its wysiwyg bbcodes

TinyMCE Quattro and its wysiwyg bbcodes 2.7.2

No permission to download
This addon doesn't interfer with the rendering of the code, php & html Bb Codes. Its job is just to create a user interface to paste your code between one of their Bb Code. If the code is too long, on my board, their's just an overflow that is created. You may need to check your css.

I'm using pretty much a stock theme, so it's not the theme. The issue is that no horizontal scroll bar is created in the code box, so it's impossible, with long code, to move to the right in order to see/select it all. The left-right scroll bar is created in redactor.

Update: Something interesting. I switched to an alternate theme on my site. It's the "soft responsive" theme available here. With that theme, the horizontal scroll bar does appear, and all is well with code. Very odd. I'm not sure why the scroll bar is not appearing with my more stock version of xenforo.

Here's an example of an HTML box in the stock theme that I'm using.

stocktheme.webp
Here's an example of an HTML box in the soft responsive alternate theme that I have.

stockthemerespon.webp
 
Last edited:
Hi All

Just getting used to this editor which is great, but doesnt really go too well with my theme as the toolbar sits at quite a deep shade of grey currently.

Please could you advise which style property i need to edit to customise this?
 
Hi All

Just getting used to this editor which is great, but doesnt really go too well with my theme as the toolbar sits at quite a deep shade of grey currently.

Please could you advise which style property i need to edit to customise this?

Yeah, post a screen shot or link.
 
@Dubbed Navigator try to not use in TinyMCE XenForo style properties integration and use "lightgray" style of TinyMCE.
Go to Apperance -> Style properties -> TinyMCE Quattro (admin.php?styles/1/style-properties&group=sedo_tinyquattro) and uncheck upper checkbox.
 
Great stuff, thats sorted it. Thank you :)

My next question is integrating this with the sonyb gallery. The mod added a BB code into the toolbar of the default editor that hasnt migrated over to this - is copying this over easy to achieve?
 
@Dubbed Navigator it seems what gallery addon was added bb-code and his editor button by own method, not using BBM.
1 - can you link to addon page? I trying to see how addon adds button to editor panel...
2 - do you install BBM to manage BB-codes and buttons?
 
Great stuff, thats sorted it. Thank you :)

My next question is integrating this with the sonyb gallery. The mod added a BB code into the toolbar of the default editor that hasnt migrated over to this - is copying this over easy to achieve?
You would have to recreate the user interface for TinyMCE, there's a tutorial in the FAQ, but I think it's more to the developers to integrate this if they find time.

Speaking of user interface, here's one that looks finished :

preview_fa.webp
It has been a nightmare to code, but it looks good.
 
Thats a shame but thanks for the help, ill contact the author but as it goes ill have to remove this addon until a solution is found which is unforutnate
 
@Dubbed Navigator
Both addons are nice (gallery and TinyMCE), but there is no single coherence between authors when creating additional tools (Author of gallery applied the own method to create the BBcode and button that not to be tied to others addons like BBM, and author of gallery is not obliged to support various third party non-default editors like TinyMCE, but IMHO - using BBM bbcodes - is best universal practics to support both editors). Need to find compromise solutions. As an optional solution - in BBM may also try to create a button without creating a bb-code (if bb code already created by gallery addon, and if this bb-code is simply, for example [gallery]content[/gallery]): in BBM click to create new bb-code, and in the tag field write gallery bb-code with @ character, for example: @gallery, this steps is creates orphan button which paste to editor "[gallery][/gallery]" text.
 
Last edited:
@Dubbed Navigator
Both addons are nice (gallery and TinyMCE), but there is no single coherence between authors when creating additional tools (Author of gallery applied the own method to create the BBcode and button that not to be tied to others addons like BBM, and author of gallery is not obliged to support various third party non-default editors like TinyMCE, but IMHO - using BBM bbcodes - is best universal practics to support both editors). Need to find compromise solutions. As an optional solution - in BBM may also try to create a button without creating a bb-code (if bb code already created by gallery addon, and if this bb-code is simply, for example [gallery]content[/gallery]): in BBM click to create new bb-code, and in the tag field write gallery bb-code with @ character, for example: @gallery, this steps is creates orphan button which paste to editor "[gallery][/gallery]" text.

I have to reply to this;)

In his addon XenGallery, Sonnb simply used the standard XenForo way to create his Bb Codes. Bbm is just an interface( with new features and many options) to help admin to create themselves Bb Codes. It is also for my own needs an easy and fast method to create advanced Bb Codes and manage the editor interface. As you know Sonnb addon is a premium one, so it's better for him to only use the standard way (what would happen to his business if any external addon he would have used is stopped or have bugs?). The TinyMCE addon has also Bb Codes and they also have been created with the standard XenForo method. Why ? Because I wanted this addon can at least be installed alone. Then I've used orphan buttons to let admins (and myself ^^) decide their position inside the editor.

Now about coherence and communication between developers, I honestly find it good most of the time. The last version of Bbm and its more adaptive code with Redactor has been released thanks to Sonnb. And when I see the compatibility between the addons of Sonnb & xfrocks, I'm quite sure there are some coherence and an excellent communication between them.

Now to come back to the subject, create user interface inside editors can take time. For the TinyMCE Quattro addon, you can use the standard TinyMCE 4.x method. It's fast to load, 100% done programmatically, but it's not that easy to program and you don't have all the advantage of the second one. This second one is loading a XenForo template inside a TinyMCE modal, which means you can use all the XenForo templates tags, you can easily load Javascript, css, etc. And you can also have access to the editor text selection before the overlay was called. The drawback is that it takes a little more time to load, but it lets developers create advanced ui (check this addon for example). I've chosen to use that second method to port XenForo official editor ui to TinyMCE 4, so that they can be used as a demo to create other ui (with the help of the FAQ if needed).
 
hey,

is it intentional that the spelling correction is not working with the editor?
I tested it with Opera and Chrome.
 
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?
 
Top Bottom