我在想一个问题,为什么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编辑器这么难挂载工具栏图标,发现没有挂载点

