javascript - 创建一个管理按钮，单击该按钮会显示一个弹出表单

Question

更新：我当前的代码正在通过单击自定义按钮图标时打开的弹出菜单正确添加具有 ID 和名称属性的锚标记。如果我单击在管理页面中添加的锚标记，我可以显示一个弹出菜单，该菜单将为链接显示，但编辑锚的名称会创建一个 https 地址，该地址会明显地附加到锚。我想通过单击添加的锚点时打开的弹出菜单编辑按钮中添加的锚点的原始 ID 和名称属性，并尝试使用 tinymce 使用自定义上下文表单，但这似乎不符合我的方式我目前正在尝试。请查看我的 JS 文件片段，该片段正确地将按钮添加到管理工具栏。我已经注释掉了我试图创建和操作链接 popumenu 的大部分代码。

我正在创建一个自定义插件，以便在经典编辑器中编辑帖子或页面时向按钮面板添加一个按钮。我向面板添加按钮没有问题，但我不确定创建弹出表单的最佳方法，允许用户输入一个值，以便稍后在单击此按钮时将其添加到正在编辑的文本中作为名称属性或标签. 我想使用纯 JS 生成此表单并在单击按钮时将其显示在管理编辑器页面上。显示的表单与单击链接按钮时显示的表单非常相似，但没有任何设置，只是一个文本框，我可以在其中捕获管理员用户输入的值。我也可以使用内置的 wordpress 模态。非常感谢这里的任何帮助。谢谢你。

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
                    //                 }
                    //             ]
                    //         },
                        // });
                    // });
                },
            });
        });
    },

标签： javascriptjquerytinymcetinymce-plugins