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
Do i need to take care of the EditorInit event?
Code: 
  $(window).on('EditorInit', function(editor, config,textarea)
            {
                this.redactor = editor;
                this.redactorOptions = config;

                if (typeof this.redactor != 'undefined')
                {
                    alert('found');
                    this.redactor.opts.buttonsCustom.fat_insertAttachment.callback = $.context(this, 'buttonCallback');
                }
                else {
                    alert('no redactor editor defined');
                }
            })

if i remove the event, it seems that my code is run too early (before the redactor editor is setup) because i'm getting always only the 'no redactor editor defined' alert

and with the on.('editorInit ) code, my code won't be called:(
the editor drives me crazy:cry:
 
I haven't tested the new XenForo 1.3 JS event, but it is triggered on the document, not the window and I don't think the event is propagated to the parent element (window), so use first "document" instead of "window" to perform your test. Then be sure to load your JS in your header (it will be then there before the editor is loaded and would avoid any problems).

Now about the undefined message, this is logical. The new event is triggered before Redactor is loaded. It's a way to modify the default configuration, not to interact immediately with the Redactor API.
 
Last edited:
cclaerhout said:
(it will be then there before the editor is loaded and would avoid any problems).
Click to expand...
It is there before the redactor.js
i'm using
PHP: 
  $view->createOwnTemplateObject()->addRequiredExternal('js','js/core/editorplugins.js');
$editorOptions['json']['buttons']['insert'] = array(
                'title' => 'insert',
                'callback' => 'foo'
            );
inside the editor_setup event

which results in:
HTML: 
<script src="js/xenforo/full/xenforo.js?_v=0885b55c"></script>
	<script src="js/core/editorplugins.js?_v=0885b55c"></script>
	<script src="js/core/editfunctions.js?_v=0885b55c"></script>
	<script src="js/redactor/redactor.full.js?_v=0885b55c"></script>
	<script src="js/xenforo/full/bb_code_edit.js?_v=0885b55c"></script>
 
cclaerhout said:
What about to put the event on document then? Same result?
Click to expand...
yes.

I've given it up to try to find a solution for the current problem and just removed
Code: 
 $view->createOwnTemplateObject()->addRequiredExternal('js','js/core/editorplugins.js');
and replaced with an template edit inside the
editor_js_setup template.
Now the redactor exists when my code is called and i can access
Code: 
 this.redactor = $textarea.data('redactor');
it's not what i wanted:D i prefered my solution without the template edit ,but it's working at least:D
 
xf_phantom said:
Would this be a good way to remove some buttons from the editor?
Click to expand...
In the Bbm addon, to perform this I've used the editor setup listener (php), then get what the admin has selected as button configuration, put this config in a new key of the array $editorOptions['json'] (ref - see "
addRedactorButtons" function). That's for the php part, then for JavaScript one, I get this new configuration and override the official button configuration (ref - line 36).

Now, to reply directly to your question, yes, I think it's a good way to remove some buttons from there (but again I haven't tested the new event and I didn't understand if you succeeded to get access to his arguments or if you only didn't get access to the Redactor API - which is normal since it's not yet available at this point). If you can access to its arguments, then just override the "buttons" key of the second one (config).
 
Thanks for this tutorial @cclaerhout! I've tried to add a custom button which inserts an HTML symbol, but can't get it working (your tag buttons do though). Am I doing something wrong with this code:

Code: 
beta: {title: '&beta;',callback: function(obj){obj.insertHtml('&beta;');}}
 
nrep said:
Thanks for this tutorial @cclaerhout! I've tried to add a custom button which inserts an HTML symbol, but can't get it working (your tag buttons do though). Am I doing something wrong with this code:

Code: 
beta: {title: '&beta;',callback: function(obj){obj.insertHtml('&beta;');}}
Click to expand...
Check the Bbm addon files, there's a php and js function that allows you to do what you're looking for (compatible with XenForo Redactor).
 
Thanks Cédric :), I'll take a look at this and see if I can figure it out. Do you happen to remember what the function may be called so I can search for it (no worries if not, I will have a good read!).
 
EQnoble said:
Is there an easy way (assume starting with the demo.js) to have the custom button trigger a modal where input can be inserted into the editor from such as this http://imperavi.com/redactor/examples/plugin-modal/ ?
Click to expand...
The easiest way should be to use the XenForo framework, but I've only seen quite limited JavaScript integration at the moment for overlays. So all depends of what you want to do. If you want to copy one existed function, just look at the XenForo source code and if you want to extend using a plugin, you can check this code ; with it you should be able to make any plugin you want using a XenForo Editor Framework event and the traditional way to create Redactor plugin.
 
This is not so clear to me, and looking at the source in this case doesn't help (I don't ask anything until I have tried it myself more than once) which is why I asked in the first place referencing the plugin-modal demo @ http://imperavi.com which I could not make work using your demo.js as a starting point.

Without a working example that's implementing a pre-made function such as the one here I have no frame of reference to understand what you mean and since xf already lets you easily add a button that inserts tags into the editor already, I figured that a prime value of this tutorial was to extend beyond that.

I am going to try working around tying into the editor to achieve what I need but thank you anyways.
 
EQnoble said:
This is not so clear to me, and looking at the source in this case doesn't help (I don't ask anything until I have tried it myself more than once) which is why I asked in the first place referencing the plugin-modal demo @ http://imperavi.com which I could not make work using your demo.js as a starting point.

Without a working example that's implementing a pre-made function such as the one here I have no frame of reference to understand what you mean and since xf already lets you easily add a button that inserts tags into the editor already, I figured that a prime value of this tutorial was to extend beyond that.

I am going to try working around tying into the editor to achieve what I need but thank you anyways.
Click to expand...
Don't really look at the imperavi demo, since XenForo has its own framework. Just look at the file "bb_code_edit.js". For example, this part:
Code: 
        media: {
           title: this.getText('media'),
           callback: $.context(this, 'getMediaModal')
         }
and it's callback:
Code: 
    getMediaModal: function(ed)
     {
       var self = this;

       ed.saveSelection();
       ed.modalInit(this.getText('media'), { url: this.dialogUrl + '&dialog=media' }, 600, $.proxy(function()
       {
         $('#redactor_insert_media_btn').click(function(e) {
           e.preventDefault();
           self.insertMedia(e, ed);
         });

         setTimeout(function() {
           $('#redactor_media_link').focus();
         }, 100);

       }, ed));
     },
The overlay is opened using the XenForo function "modalInit" which is bound on the editor object. The template called is in that line:
Code: 
&dialog=media
It's the media one. A prefix will be automatically added: "editor_dialog_". Which means the template called is "editor_dialog_media".

If you want to insert text, that's not the best example (it's using a custom function to insert a media). You will have to use this cmd:
Code: 
ed.execCommand('inserthtml', 'Your Text');

If you prefer to code something that looks more like the demos on the imperavi website, the previous link I gave you (ref) should help you. Note that you can extend or modify the XenForo Editor config, directly there (see data.config).
 
Last edited:
cclaerhout said:
Don't really look at the imperavi demo, since XenForo has its own framework. Just look at the file "bb_code_edit.js". For example, this part:
Code: 
        media: {
           title: this.getText('media'),
           callback: $.context(this, 'getMediaModal')
         }
and it's callback:
Code: 
    getMediaModal: function(ed)
     {
       var self = this;

       ed.saveSelection();
       ed.modalInit(this.getText('media'), { url: this.dialogUrl + '&dialog=media' }, 600, $.proxy(function()
       {
         $('#redactor_insert_media_btn').click(function(e) {
           e.preventDefault();
           self.insertMedia(e, ed);
         });

         setTimeout(function() {
           $('#redactor_media_link').focus();
         }, 100);

       }, ed));
     },

If you prefer to code something that looks more like the demos on the imperavi website, the previous link I gave you (ref) should help you. Note that you can extend or modify the XenForo Editor config, directly there (see data.config).
Click to expand...
I believe this makes sense to me now (won't be sure until I try again while referencing this). Thanks for clearing it up a bit for me.
 
EQnoble said:
I believe this makes sense to me now (won't be sure until I try again while referencing this). Thanks for clearing it up a bit for me.
Click to expand...
One last thing that can avoid you to waste time, the $.context function is not a jQuery default function. It's a function added by XenForo. If you want to do the same (there are may be differences, I haven't checked), use the official jQquery $.proxy function. It allows to pass the current context (like the this object in php) to the targeted function. Since jQuery has been updated in XenForo 1.2, this proxy function has become very convenient, cause you can pass arguments with it. See the official documentation for it.
 
To be honest I just woke up a short while ago and tried to make a button that triggers an empty modal window (thinking along the lines of worry about it's context/function after the trigger works properly) and all methods I have tried consistently do the same thing, which is nothing and that is mostly because the way I have to go about adding my own modal seems so convoluted.

I am posting here in that I hopes that if someone has/can setup a basic example such as the downloadable resource included here that fires a modal instead of just inserting empty tags when clicked that they could share the js file and method of inclusion.

I normally like to figure as much on my own as possible, but two days where all working hours were spent on trying to add a button is about my limit on this and most frustrating is in my head the form I put together should be the most difficult thing to handle for this, yet in comparison it turns out to be trivial when compared against how complex it is just to add a button to the editor 'the proper way' when with straight js and a bit of jquery I know that I can design this to be a button which can be inserted into the editor toolbar after the pageloads and from there move forward with building that buttons function with no limitation which can eventually insert the final text into the editor.

<sigh>
<bah hambug>
 
You must log in or register to reply here.
Top Bottom