Resource icon

How to add some plugins or custom buttons to Redactor 1.2

No permission to download

cclaerhout

Well-known member
cclaerhout submitted a new resource:

How to add some plugins or custom buttons to Redactor - -

How to add some plugins or custom buttons to Redactor?
A few things before to know:
  • No need to waste your time to look at the Redactor API on the official website, a lot of functions have changed and are now for Redactor 9. They didn't keep a track of Redactor 8 API. Better to look at directly the code.
  • No need to waste your time to try to use some Redactor API with the XenForo framework, it seems they don't work and furthermore they have bugs (even the...

Read more about this resource...
 
Last edited:
There may be a better way, but after playing around a bit, an easy way to manipulate the button positioning seems to be to overwrite the _adjustButtonConfig function for XenForo.BbCodeWysiwygEditor. It's a smaller function so it's not too bad. Before returning the config you can do something like this:
Code:
      config.buttons = [
            ['switchmode'], ['removeformat'],
            ['bold', 'italic', 'underline', 'deleted'],
            ['fontcolor', 'fontsize', 'fontfamily'],
            ['createlink', 'unlink'],
            ['alignment'],
            ['unorderedlist', 'orderedlist'],
            ['smilies', 'image', 'media'],
            ['code', 'quote'],
            ['draft'],
            ['undo', 'redo']
        ];
Those are the buttons by default, but you can add new buttons, remove certain ones, reposition them, add them to different groups, etc. by manipulating the array. If you're worried about other buttons being added/changed, you could probably splice the array or something instead. Works for me in the time being.
 
@cclaerhout or anyone, how can you parse your custom bbcode tags, in javascript ?

As you can see with redactor, if you hover a text and click on bold, italic, etc, the texte will be formatted. How can I do the same with my custom bbcodes ?
 
@cclaerhout or anyone, how can you parse your custom bbcode tags, in javascript ?

As you can see with redactor, if you hover a text and click on bold, italic, etc, the texte will be formatted. How can I do the same with my custom bbcodes ?
It's complicated, so I would recommend to forget this idea.
1) You've to develop a Redactor Plugin using its API. Since the Redactor version used by XenForo is a former one, the API commands are not exactly the same. You need to be a customer to get access to the old apo
2) Once you will have finished with your JS, you will have to convert the html to bbcode. The XenForo class doing this has no listener, so you will have to code in the php file.
3) Once you will have finised with above two steps, you need to create a bbcode to get back the html. The XenForo class doing this has a listener.
 
It's complicated, so I would recommend to forget this idea.
1) You've to develop a Redactor Plugin using its API. Since the Redactor version used by XenForo is a former one, the API commands are not exactly the same. You need to be a customer to get access to the old apo
2) Once you will have finished with your JS, you will have to convert the html to bbcode. The XenForo class doing this has no listener, so you will have to code in the php file.
3) Once you will have finised with above two steps, you need to create a bbcode to get back the html. The XenForo class doing this has a listener.

Ok great thanks you Cedric.

One other thing, I know you said the TinyQuattro isn't supported, but it looks like it's not working with the attachment handler of xenforo's core : when you upload a file using the "Upload a file" button, the file is uploaded, but when you hit the button that include the
 
Ok great thanks you Cedric.

One other thing, I know you said the TinyQuattro isn't supported, but it looks like it's not working with the attachment handler of xenforo's core : when you upload a file using the "Upload a file" button, the file is uploaded, but when you hit the button that include the bbcode with the file you uploaded, it's not being added into the editor.

TinyQuattro is really powerfull btw.

Best regards.[/ATTACH]
Please post in the correct thread (the one of TinyQuattro). I've tested, images are inserted inside the editor (both on XenForo 1.1/ XenForo 1.2).
 
Cedric, in your tutorial you showed us how to add a custom icon that will auto insert a tag into the editor.

How can we load a modal, and then insert html content into the editor, like for your addon tinyquattro?

Regards.
 
Cedric, in your tutorial you showed us how to add a custom icon that will auto insert a tag into the editor.

How can we load a modal, and then insert html content into the editor, like for your addon tinyquattro?

Regards.
No idea, I haven't look at this part of the XenForo framework. But you probably just need to directly look inside the XenForo code to find this: upload\js\xenforo\full\bb_code_edit.js
 
No idea, I haven't look at this part of the XenForo framework. But you probably just need to directly look inside the XenForo code to find this: upload\js\xenforo\full\bb_code_edit.js

My problem is to extend it, I can modify the core file but that's not the best way to do it...
 
My problem is to extend it, I can modify the core file but that's not the best way to do it...
I haven't check how to create a custom editor command with the Redactor API (that can be used with execCommand). Just find this and this would be easy since the XenForo framework has an option to execute this (Check the first JS of the archive, there's a note about it: "You can instead of the "tag" key use the "exec" key to execute an execCommand").
 
In your demo, you have plugins: '['test', 'test2']'. Can you give us an example of them in use? Maybe just a simple command that triggers a alert() popup?
 
In your demo, you have plugins: '['test', 'test2']'. Can you give us an example of them in use? Maybe just a simple command that triggers a alert() popup?
Sorry, I don't use this editor. I've done this basic tutorial after that some members ask me to make the button manager compatible with the new default editor and to provide some information to help developers to go continue on this topic.
 
cclaerhout updated How to add some plugins or custom buttons to Redactor with a new update entry:

Version 1.2 released

Two things with this version 1.2:

  1. If you have used the JavaScript Patterns provided with this ressource inside your code, you must update one line to prevent errors with other addons:
    Search:
    Code:
    $textarea.data('options', $.extend(redactorOptions, myOptions));

    Replace with:
    Code:
    $.extend(true, redactorOptions, myOptions);

    Explanation:
    The Recursive mode of the jQuery extend function must be activated
  • If you want add...

Read the rest of this update entry...
 
Parse error: syntax error, unexpected T_STATIC in /home/hondamodif/domains/xxxxx.com/public_html/forum/library/Milano/Common/Install.php on line 31
 
Top Bottom