Resource icon

How to add some plugins or custom buttons to Redactor 1.2

No permission to download
Overview Updates (2) Reviews (2) History Discussion
cclaerhout

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...
Click to expand...

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 ?
 
allewreK said:
@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 ?
Click to expand...
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.
 
cclaerhout said:
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.
Click to expand...

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
 
allewreK said:
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]
Click to expand...
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.
 
allewreK said:
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.
Click to expand...
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
 
cclaerhout said:
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
Click to expand...

My problem is to extend it, I can modify the core file but that's not the best way to do it...
 
allewreK said:
My problem is to extend it, I can modify the core file but that's not the best way to do it...
Click to expand...
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?
 
emc2 said:
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?
Click to expand...
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...
Click to expand...

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
 
You must log in or register to reply here.
Back
Top Bottom