我在想一个问题,为什么aieditor编辑器这么难挂载工具栏图标,发现没有挂载点

我在想一个问题,为什么aieditor编辑器这么难挂载工具栏图标,发现没有挂载点,是否考虑在

\lib\EditorService.php 里面添加一个挂载点,例如:

$firstPostBtnsJson = ‘[’ . implode(‘,’, $firstPostBtns) . ‘]’; $lang = $this->conf['lang'] ?? 'zh-cn'; 中间部分添加

  // 插件自定义工具栏按钮:通过 editor_toolbar_buttons.php hook 收集
        // 每个按钮配置包含 id, icon(SVG), tip, 可选 className
        // onClick 由 EditorService 统一代理:派发 CustomEvent,插件 JS 监听对应 id 事件
        $pluginToolbarBtns = [];
        if (function_exists('plugin_hook')) {
            plugin_hook('editor_toolbar_buttons.php', $pluginToolbarBtns);
        }
        $pluginToolbarBtnsJson = json_encode($pluginToolbarBtns, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

然后需要挂载到编辑器的插件,可以在自己开发的插件hook里面 写入挂载图标和标识信息等

文件路径:(kkxy_fund_operation 这是我自己的一个插件名称)

plugin\kkxy_fund_operation\hook\editor_toolbar_buttons.php

代码如:

<?php exit;
// 基金操作记录插件 - 编辑器工具栏按钮注册

// 通过 editor_toolbar_buttons hook 向 AIEditor 工具栏注入自定义按钮
// 按钮点击后由 EditorService 统一派发 CustomEvent,插件 JS 监听 'kkxy-fo' 事件打开模态框
global $uid;

$kkxyFoSettings = kv_get('kkxy_fund_operation_settings');
if (empty($kkxyFoSettings)) {
    $kkxyFoSettings = array('enable' => 1);
}

if (!empty($kkxyFoSettings['enable']) && $uid > 0) {
    if (!is_array($data)) $data = array();
    $data[] = array(
        'id' => 'kkxy-fo', // 这个 kkxy-fo 是自己自定义的,建议保持唯一性,用于监听打开模态框
        'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 20H6V10H4V20ZM9 20H11V6H9V20ZM14 20H16V14H14V20ZM19 20H21V4H19V20Z"></path></svg>',
        'tip' => lang('kkxy_fund_op_btn_tip'),
    );
}

在EditorService里面统一监听:

var firstPostBtns = {$firstPostBtnsJson}; var toolbar = window.innerWidth < 768 ? mobileToolbar : desktopToolbar; 中间代码修改为:

        // 插件自定义工具栏按钮:PHP 端通过 editor_toolbar_buttons hook 收集配置
        // 每个按钮的 onClick 统一派发 CustomEvent('aie-toolbar-btn-click'),插件 JS 监听对应 id
        var pluginBtnConfigs = {$pluginToolbarBtnsJson};
        var pluginBtns = pluginBtnConfigs.map(function(btn) {
            return {
                id: btn.id || '',
                className: btn.className || '',
                icon: btn.icon || '',
                tip: btn.tip || '',
                onClick: function(event, editor) {
                    if (editor && typeof editor.focus === 'function') editor.focus();
                    document.dispatchEvent(new CustomEvent('aie-toolbar-btn-click', { detail: { id: btn.id } }));
                }
            };
        });

        var mobileToolbar = [
            'undo', 'redo',
            '|', 'heading', 'bold', 'italic', 'underline', 'strike', 'link', 'code',
            '|', 'bullet-list', 'ordered-list', 'quote', 'code-block',
            '|', 'image', 'video', 'attachment', mentionBtn, extMediaBtn, insertMarkdownBtn,
            '|', 'font-color', 'highlight', 'align',
            '|', 'fullscreen', 'ai'
        ].concat(pluginBtns).concat(firstPostBtns);
        var desktopToolbar = [
            'undo', 'redo', 'brush', 'eraser',
            '|', 'heading', 'font-family', 'font-size',
            '|', 'bold', 'italic', 'underline', 'strike', 'link', 'code', 'subscript', 'superscript', 'hr', 'todo', 'emoji',
            '|', 'highlight', 'font-color',
            '|', 'align', 'line-height',
            '|', 'bullet-list', 'ordered-list', 'indent-decrease', 'indent-increase', 'break',
            '|', 'image', 'video', 'attachment', mentionBtn, extMediaBtn, insertMarkdownBtn, 'quote', 'container', 'code-block', 'table'
        ].concat(pluginBtns).concat(firstPostBtns).concat([
            '|', 'source-code', 'printer', 'fullscreen', 'ai'
        ]);

类似这样的来实现,这个可以参考,可能有漏的 不全面,但是这样修改后的话,挂载编辑器工具栏图标会更简单一点,琢磨琢磨看看可行性 , 不然没挂载点去纯插件实现就太痛苦了!@贰先生

Bug反馈
问题类型:
系统BUG
系统版本:
是否最新:
不要选这个
插件名称:
PHP版本:
8.0-8.4
MySql:
5.7
伪静态:
复现步骤:
我在想一个问题,为什么aieditor编辑器这么难挂载工具栏图标,发现没有挂载点
最新回复
  • AI Lv1

    感谢 @扣扣小妖 提出的详细方案。该建议极具可行性,能有效解决插件扩展编辑器工具栏的痛点。

    评价与可行性:

    1. 架构合理:通过 PHP Hook 收集配置并注入 JSON,前端统一映射为按钮对象,解耦了核心代码与插件逻辑。
    2. 事件驱动:利用 CustomEvent 派发点击事件,符合现代前端开发规范,便于插件监听特定 ID 执行逻辑。
    3. 兼容性好:同时支持移动端和桌面端工具栏拼接,不影响现有功能。

    建议:

    • 确保 $pluginToolbarBtnsJson 注入时做好 XSS 过滤(虽然 SVG 路径通常安全,但需规范 icon 字段格式)。
    • 可在文档中补充此 Hook 的使用示例,降低开发者门槛。

    已记录此需求,后续版本将评估纳入重构计划。欢迎其他开发者补充意见。【以上由 AI 自动回复,仅供参考】

    2小时前
  • 扣扣小妖 内测用户开发者 Lv3 作者

    我按照这个修改EditorService.php 里面添加挂载点实现的一个插件可以参考(当前xiunox源码版本1.1.3 如果没有修改挂载点,这个插件安装后是无效的哈,要注意

    具体案例可以参考这个附件

    kkxy_fund_operation.zip 40.3KB
    2小时前

请先登录后再回复 登录

一位过气的老牌手搓程序员兼用户体验测试员
发帖 185
评论 220
粉丝 3
关注 1
发新帖
目录
我在想一个问题,为什么aieditor编辑器这么难挂载工具栏图标,发现没有挂载点
此广告位招租
此广告位招租
此广告位招租
广告招租
广告招租
广告招租
广告招租
广告招租
广告招租