wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

[Solved] Custom Editor Spoiler Button

3 Posts
2 Users
2 Likes
274 Views
XVanish
Posts: 10
Topic starter
(@xvanish)
Active Member
Joined: 6 months ago

Hellow Everyone,

I've been trying to replace the existing Rich Editor Spoiler Button with a custom one so that I can get rid of the alert prompt for the Spoiler Title and also to be able to insert a custom shortcode for it in the form.

My button is this one:

// Add Custom Editor Spoiler Button
add_filter("wpdiscuz_editor_buttons", function ($editorButtons, $uniqueId) {
    $editorButtons[] = ["class" = "ql-bu-spoiler", "title" ="Spoiler", "value" ="", "name" ="bu-spoiler", "svg" ="SPOILER"];
    return $editorButtons;
}, 10, 2);

I'm having trouble detecting the current editor, simple events like this:

$("#wpdcom .wpd-form-wrapper .ql-toolbar .ql-bu-spoiler").on("click",(function(){
    console.log('spoiler button clicked');
}));

Are only working on the main form. I've tried several ways to detect the current used editor, searching the DOM for them, or using "on change" and event handlers for the form-wrappers and the editors but for some reason I can't make it work.

Then I've tried to tap into wpDiscuz AJAX and also tried to use wpdiscuzAjaxObj but it's just not working... I'm missing something and I can't figure it out without some guidance. The API docs don't have what I need and I don't want to start replicating wpDiscuz functionallity from the main WpdEditor JS classes or Quill, it's just not a good approach since the functionallity is already there.

Please send me in the right direction, or better yet, provide me with the proper code to detect the editors and apply stuff to them, particullary based on editor buttons click events. I do plan adding more custom buttons, not just this custom spoiler, so it's really important to make this work.

Thank you very much!

2 Replies
Asti
Posts: 5037
 Asti
Support
(@asti)
Illustrious Member
Joined: 5 years ago

Hi XVanish,

The correct js selector is provided below:

jQuery(document).on("click",".ql-bu-spoiler",function(){
    console.log("spoiler button clicked");
});
1 Reply
XVanish
(@xvanish)
Joined: 6 months ago

Active Member
Posts: 10

@asti 

That works on all the forms! I must've been too tired last night because it didn't cross my mind to just apply it to the "document" not trying to find the editors themselfs, thank you! So basically I need to refer to the button itself directly, no matter the form if it's the main one or a reply / clonned one. Oki, I'll create my code based on that button's parrents to get the current editor.

Thanks for now, hopefully I'll make it work.

Share: