You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为Elementor Text Editor小部件工具栏添加自定义按钮?

给Elementor文本小部件工具栏添加自定义按钮

我想在Elementor文本小部件的工具栏里,给加粗、斜体、下划线这些按钮旁边加一个自定义按钮。目前PHP自定义实例的功能被禁用了,只能通过JavaScript实现。

我可以用下面的代码获取到视图,但一直拿不到编辑器实例:

elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}

我试了以下几种方法,都没得到有效结果:

// 获取编辑器的活动实例
let editor = tinymce.activeEditor;
var editor = elementor.editors.get(0).getEditModel().get('editor');
var activeEditor = view.getOption('editor');

拿到编辑器实例后,后续的添加按钮代码已经写好了,但还没到这一步:

// 给编辑器按钮组添加按钮
editor.addButton('tooltip', {
  text: 'tooltip',
  icon: false,
  onclick: (editor) => {
    tooltipCallback(editor);
  }
});

// 获取刚创建的按钮
let button=editor.buttons['tooltip'];

// 找到主题面板工具栏里的按钮组
let bg=editor.theme.panel.find('toolbar buttongroup')[0];

// 不加这行,按钮样式会异常
bg._lastRepaintRect=bg._layoutRect;

// 将按钮追加到按钮组中
bg.append(button);

内容的提问来源于stack exchange,提问作者quicksilver

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 05:48:24