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
@EQnoble
I will provide you an example in the next few days. But please note that I don't like the version 8 of redactor because it has too many problems with the dom (I can't say for more recent, I haven't tested them) and that I've provided an other solution for TinyMCE (ref ; read the template return sections) which is, I think, quite easy to setup.

P.S: if you just need to insert text clicking on a button (without modal), this addon has a function compatible with Redactor.
 
cclaerhout said:
@EQnoble

Here's what you need. The Github is here.
Click to expand...
Thanks but I am wondering if I am misunderstanding something here?

Currently the addon in the zip just inserts empty demo tags and the original resource of this thread does that already quite fine.

Is this addon supposed to add a bbcode button that when clicked opens a modal?
 
EQnoble said:
Thanks but I am wondering if I am misunderstanding something here?

Currently the addon in the zip just inserts empty demo tags and the original resource of this thread does that already quite fine.

Is this addon supposed to add a bbcode button that when clicked opens a modal?
Click to expand...
No, there should be a modal. As you requested, this addon should show:
  1. How to manage a XenForo modal (call, cursor position save, restore cursor position, exit)
  2. How to insert a code coming from a modal inside the editor
  3. How to manage a Redactor plugin as you saw it on Imperavi
If you take time to read the source, you will find more information.

And for the record, the original resource of this thread didn't use the XenForo Redactor event that is used here fore the simple reason it has been added by Mike after since developers had problems to extend and access the XenForo framework.

I'm going to check if an element is not missing in the archive (bad addon association may be).
 
EQnoble said:
Tried the update, and it results in an endless loading if I try to edit a post, and the editor to create a new post disappears completely.
Click to expand...
Tested on two browsers and two different forums, it's working for me. As usual, check your console to detect any js error.

EQnoble said:
I am highly confused now
Click to expand...
The github commit show all modifications. Feel free to take a look at them.
 
EQnoble said:
ReferenceError: RedactorPlugins is not defined
Click to expand...
Bug fixed (commit). It's coming from another Redactor oddity that is using a plugin object but without creating it which means every of its plugins must check if it has been created before ((y)).
In this new version, I've improved the modal title integration: it is now phrased.

P.S: I didn't have that bug because the BBM addon already creates the Redactor plugin object.
 
Last edited:
I installed it on a fresh xf and when active, clicking the editor does not make it active or remove the opacity. I was only able to make it work (by that I mean the button for one thing showing up that has nothing to do with the actuall bbcode I am building) by changing the template modifications, adding a js file from the original resource and mashing other things up but it really does not work the way I need it nor am I able to understand the logic behind it and can't really use it for an addon I plan on distributing because with the amount of different examples in the code I don't know what is needed what is not and it would be impossible for me to support it on my own .

I think I am just going to say thank you and don't worry about spending any more of your time on this. I am just going to write a couple of lines of jquery and append a button to the toolbar that makes an ajax call without having a real chance of breaking the editor in a way I can not support.

I do appreciate your effort but since I am spending my holidays at the computer I feel like I need to do something that yields some personal accomplishment within that time and I don't see myself finishing the addon rewrite using this method of adding a button for an existing custom bbcode.

A happy holidays to you Cédric.
 
@EQnoble,

My bad, the declaration of the RedactorPlugins object needed to be done out of the main function scope.

I've updated the code and have written an example on how to programmatically add a button using the Redactor way to do it (commit 1, commit 2). Note that this Redactor method is based on the version 8 of its API which has slightly changed in its new version. This means: you can't refer to the current online Redactor API.

The XenForo framework for Redactor isn't really "admin friendly": it requires to be familiar with the JavaScript language. So take your time and as you said, spend your time instead with your family & friends or just by reading a good book :)

Merry Christmas !
 
Last edited:
cclaerhout said:
@EQnoble,

My bad, the declaration of the RedactorPlugins object needed to be done out of the main function scope.

I've updated the code and have written an example on how to programmatically add a button using the Redactor way to do it (commit 1, commit 2). Note that this Redactor method is based on the version 8 of its API which has slightly changed in its new version. This means: you can't refer to the current online Redactor API.

The XenForo framework for Redactor isn't really "admin friendly": it requires to be familiar with the JavaScript language. So take your time and as you said, spend your time instead with your family & friends or just by reading a good book :)

Merry Christmas !
Click to expand...
I am familiar with javascript, I am not familiar with what does what in this particular script nor do I understand why it is done the way it is done, seems like way too much code to add a button to trigger a modal.

Like I said I am working through the holidays, it's just a matter of wanting to get something useful done (which I have done now already in straight js and a lil bit of jQ without having to worry about a whole bunch of shenanigans.) and with the way I have it now, xenforo could change the editor 50 times and my buttons would still work the way they do now.
 
EQnoble said:
I am familiar with javascript, I am not familiar with what does what in this particular script nor do I understand why it is done the way it is done, seems like way too much code to add a button to trigger a modal.
Click to expand...
You might be familiar with JavaScript, but then you still need to read a little more code to get a better understanding of some aspects of this language. The undefined RedactorPlugins variable objet was not that hard to fix, especially when the alert message pops up inside the browser console. Once the comments striped out and only the modal part is kept, the code is 26 lines (blank lines included):
Code: 
!function($, window, document, undefined)
{
   $(document).on('EditorInit', function(e, data){
     var editorFramework = data.editor,
       config = data.config;

     var demoButtonCallback = function(ed, ev)
     {
         ed.saveSelection();

       var modalTitle = editorFramework.getText('custom_demo_title');

         ed.modalInit(modalTitle, { url: editorFramework.dialogUrl + '&dialog=demo' }, 600, $.proxy(function()
         {
         //Modal management
         }, ed));
     };

     if(typeof config.buttonsCustom != undefined && typeof config.buttonsCustom.custom_demo != undefined){
       var demoButton = config.buttonsCustom.custom_demo;

       demoButton.callback = demoButtonCallback;
     }
   });
}
(jQuery, this, document, 'undefined');

I wouldn't call that "too much code". But if you have a better and simpler way to plug to the modal function, fell free to share. Thus, I really don't think there is. If you have a precise question on a particular part of the code, feel free to ask.

P.S: I think the line "ed.saveSelection();" could also be stripped out since it's called any by the modalInit function which could lower the number of lines to 24. But since XenForo is using in its own framework, I kept it in this tutorial.
 
Like I was saying, without proper documentation for both frameworks, looking at a single doc of code is useless for me which is what I was implying after trying it. This is why I said don't bother doing this for me because it does not help me build what you did with 'demo' into my existing addon's bbcode which is already constructed and can not be changed, I just wanted to add a button for that thing that fires an empty modal and from there integrate the form into the modal, small steps.

I did not want to call xenforo's modal specifically, I just wanted a button that I was capable of doing what ever I wanted with, including triggering a modal (basically be able fire any js when custom button is clicked), even if I had to construct all the html for it myself.

Either way, I am broke and got nothing done in an entire day and don't have time to learn all this undocumented functionality to simply add one button to the editor that when clicked fires whatever random js I want.

What I did is not worth sharing...it is literally one line of js to insert the button into the editor and one function to handle when that button gets clicked and the way it is written it is straightforward and easy to understand, however I could insert my button anywhere on the page and it can fire a modal and still insert text but again and this is because I did not extend or use any existing code to do this so it is rather unrelated to the thread and again no value in sharing because what I did could be used anywhere with any software and at this point is not even related to xenforo development.
 
I have installed the demo and modified template with user dialog. Works perfect. Thank you @cclaerhout .

However, I have one more question. At the moment extend.js is added both for anonymous and registered users. I have searched in templates for extend.js to build a wrapper around it like "if user is logged in then add extend,js"...

But unfortunately I could not find extend.js within the templates. Any ideas where to look? Thank you.
 
You must log in or register to reply here.
Top Bottom