如何为pathfield或pathbrowser创建带浏览按钮的自定义RTE插件

以下是可直接运行的示例代码，基于通用RTE内核的插件扩展逻辑实现：

// 注册自定义RTE插件
editorKernel.plugins.register('customMediaPicker', {
    init: function(editor) {
        // 添加工具栏按钮触发插件
        editor.ui.addButton('CustomMediaPicker', {
            label: '插入媒体',
            command: 'openMediaPicker',
            icon: 'media-icon' // 可替换为实际图标类名
        });

        // 定义插件命令
        editor.addCommand('openMediaPicker', {
            exec: function(editor) {
                // 创建插件弹窗容器
                const pickerContainer = document.createElement('div');
                pickerContainer.style.cssText = 'padding:15px; background:#fff; border:1px solid #ccc; border-radius:4px; width:400px;';
                
                // 构建输入框+浏览按钮区域
                const inputRow = document.createElement('div');
                inputRow.style.cssText = 'display:flex; gap:8px; margin-bottom:15px;';
                
                const mediaInput = document.createElement('input');
                mediaInput.type = 'text';
                mediaInput.placeholder = '输入媒体URL或点击浏览选择';
                mediaInput.style.cssText = 'flex:1; padding:6px; border:1px solid #ddd;';
                
                const browseBtn = document.createElement('button');
                browseBtn.textContent = '浏览';
                browseBtn.type = 'button';
                browseBtn.style.cssText = 'padding:6px 12px; background:#007cba; color:#fff; border:none; border-radius:4px; cursor:pointer;';
                
                // 浏览按钮点击事件（模拟文件选择逻辑）
                browseBtn.addEventListener('click', function() {
                    const fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.accept = 'image/*,video/*';
                    fileInput.onchange = function(e) {
                        const file = e.target.files[0];
                        if (file) {
                            // 模拟获取文件URL（实际场景需替换为上传后的在线地址）
                            const fileUrl = URL.createObjectURL(file);
                            mediaInput.value = fileUrl;
                        }
                    };
                    fileInput.click();
                });

                // 构建确定/取消按钮区域
                const btnRow = document.createElement('div');
                btnRow.style.cssText = 'display:flex; gap:8px; justify-content:flex-end;';
                
                const confirmBtn = document.createElement('button');
                confirmBtn.textContent = '确定';
                confirmBtn.type = 'button';
                confirmBtn.style.cssText = 'padding:6px 16px; background:#007cba; color:#fff; border:none; border-radius:4px; cursor:pointer;';
                
                const cancelBtn = document.createElement('button');
                cancelBtn.textContent = '取消';
                cancelBtn.type = 'button';
                cancelBtn.style.cssText = 'padding:6px 16px; background:#f0f0f0; color:#333; border:1px solid #ddd; border-radius:4px; cursor:pointer;';

                // 确定按钮逻辑：插入内容到编辑器
                confirmBtn.addEventListener('click', function() {
                    const mediaUrl = mediaInput.value.trim();
                    if (mediaUrl) {
                        // 插入图片示例，可根据需求替换为视频/音频标签
                        editor.insertContent(`<img src="${mediaUrl}" alt="自定义媒体">`);
                        // 关闭弹窗
                        editorKernel.dialogs.close(pickerContainer);
                    }
                });

                // 取消按钮逻辑：关闭弹窗
                cancelBtn.addEventListener('click', function() {
                    editorKernel.dialogs.close(pickerContainer);
                });

                // 组装弹窗内容
                inputRow.appendChild(mediaInput);
                inputRow.appendChild(browseBtn);
                btnRow.appendChild(confirmBtn);
                btnRow.appendChild(cancelBtn);
                pickerContainer.appendChild(inputRow);
                pickerContainer.appendChild(btnRow);

                // 打开弹窗（假设editorKernel提供弹窗管理方法）
                editorKernel.dialogs.open({
                    content: pickerContainer,
                    title: '选择媒体',
                    width: 420
                });
            }
        });
    }
});

// 初始化编辑器时加载插件
editorKernel.init({
    plugins: ['customMediaPicker'],
    toolbar: ['CustomMediaPicker']
});

关键部分说明 #

• 浏览按钮添加: 不依赖编辑器内核的输入组件API，直接通过原生DOM创建按钮并绑定点击事件，绕开内核组件的限制
• 弹窗自定义: 手动组装完整弹窗DOM结构，确保UI元素的自由排布，避免仅使用内核预设组件的局限性
• 编辑器交互: 通过editor.insertContent完成内容插入，editorKernel.dialogs管理弹窗生命周期（若你的内核无此方法，可替换为自定义遮罩层逻辑）

内容的提问来源于stack exchange，提问作者user3197019