plugins - Creating an admin button that when clicked shows a popup form

admin管理员组

文章数量:1279112

I am creating a custom plugin to add a button to the buttons panel when editing a post or page in the classic editor. I have no trouble adding a button to the panel, but am unsure of the best way to create a popup form allowing a user to input a value to later be added to the text being edited as a name attribute or tag when this button is clicked. I would like to use pure JS to generate this form and show it on the admin editor page when the button is clicked. The form shown will be very similar to that shown when the link button is clicked but without any settings, just a text box where I can capture the value an admin user inputs. There also may be built in wordpress modals I am open to using. Any help here greatly appreciated. Thank you. Update: My current code is working to add an anchor tag with an ID and name attribute correctly through a popup menu opened when I click my custom button's icon. If I click the anchor tag added in the admin page I can display a popup menu that would display for a link but editing the name of the anchor creates an https address which is appended to the anchor visibly. I would like to just edit the anchor's original ID and name attribute added in my button through the popup menu opened when clicking on the anchor added and have tried using a custom context form using tinymce, but this does not seem to stick in the way I am currently attempting. Please see the snippet of my JS file which is correctly adding a button to the admin toolbar. I've commented out a large section of my code where I tried to create and manipulate the link popumenu.

ed.addButton("custom_anchor_tag", {
            title: "custom anchor tag",
            cmd: "custom_anchor_tag",
            image: custom_anchor_tag_icon
        });

        // Add Button Functionality:
        ed.addCommand("custom_anchor_tag", function () {
            //add popup modal for user to enter anchor tag text
            tinymce.activeEditor.windowManager.open({
                title: 'Enter the name of your anchor please without the # symbol', // The dialog's title - displayed in the dialog header
                type: 'input', 
                id: 'anchorTitle', 
                body: {
                    type: 'panel', // The root body type - a Panel or TabPanel
                    items: [ // A list of panel components
                        {
                            id: 'anchorInput',
                            type: 'textbox', // A HTML panel component
                        }
                    ]
                },
                onSubmit: function () {
                    let text = jQuery('#anchorInput')[0].value;
                    let baseAnchor = `<span id="context-form><a id=${text} name=${text} href=${text} class="mce-item-anchor" href=${text}
                      });></a></span>`; //onclick="window.open('yourLink','popup'); return false;"
                    
                      //   tinymce.init({
                    //     selector: 'p>span#context-form',
                    //     height: 300,
                    //     setup: function (editor) {
                    //       var isAnchorElement = function (node) {
                    //         return node.nodeName.toLowerCase() === 'a';
                    //       };
                      
                    //       var getAnchorElement = function () {
                    //         var node = editor.selection.getNode();
                    //         return isAnchorElement(node) ? node : null;
                    //       };
                      
                    //       editor.ui.registry.addContextForm('link-form', {
                    //         launch: {
                    //           type: 'contextformtogglebutton',
                    //           icon: 'link'
                    //         },
                    //         label: 'Link',
                    //         predicate: isAnchorElement,
                    //         initValue: function () {
                    //           var elm = getAnchorElement();
                    //           return !!elm ? elm.href : '';
                    //         },
                    //         commands: [
                    //           {
                    //             type: 'contextformtogglebutton',
                    //             icon: 'link',
                    //             tooltip: 'Link',
                    //             primary: true,
                    //             onSetup: function (buttonApi) {
                    //               buttonApi.setActive(!!getAnchorElement());
                    //               var nodeChangeHandler = function () {
                    //                 buttonApi.setActive(!editor.readonly && !!getAnchorElement());
                    //               };
                    //               editor.on('nodechange', nodeChangeHandler);
                    //               return function () {
                    //                 editor.off('nodechange', nodeChangeHandler);
                    //               }
                    //             },
                    //             onAction: function (formApi) {
                    //               var value = formApi.getValue();
                    //               console.log('Save link clicked with value: ' + value);
                    //               formApi.hide();
                    //             }
                    //           },
                    //           {
                    //             type: 'contextformtogglebutton',
                    //             icon: 'unlink',
                    //             tooltip: 'Remove link',
                    //             active: false,
                    //             onAction: function (formApi) {
                    //               console.log('Remove link clicked');
                    //               formApi.hide();
                    //             }
                    //           }
                    //         ]
                    //       });
                    //     },
                    //     content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                    //   });
                      


                    //attempt to attach a popup menu to text
                    ed.execCommand("mceInsertContent", 0, baseAnchor);
                    //create hover effect on anchor element that opens a popup window similar to the link editor.
                    // jQuery('.mce-item-anchor').on('click', function(event) {
                    //     console.log(this);
                    //     // highlight the mouseover target
                    //     event.tinymce.activeEditor.windowManager.open({
                    //         title: 'Enter the name of your anchor please without a # symbol', // The dialog's title - displayed in the dialog header
                    //         type: 'input',
                    //         id: 'anchorTitle',
                    //         body: {
                    //             type: 'panel', // The root body type - a Panel or TabPanel
                    //             items: [ // A list of panel components
                    //                 {
                    //                     id: 'anchorInput',
                    //                     type: 'textbox', // A HTML panel component
                    //                 }
                    //             ]
                    //         },
                        // });
                    // });
                },
            });
        });
    },

本文标签： pluginsCreating an admin button that when clicked shows a popup form