The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
Search
Close
AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

AI Assistant
Custom Editor Spoil...
 
Notifications
Clear all

[Solved] Custom Editor Spoiler Button

3 Posts
2 Users
2 Reactions
5,521 Views
Posts: 10
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@xvanish)
Active Member
Joined: 4 years ago
[#3683]

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: 8217
 Asti
Support
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@asti)
Illustrious Member
Joined: 8 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)
Joined: 4 years ago

Active Member
Posts: 10
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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.