在 WordPress 中的 Tinymce 中为短代码创建自定义下拉框

发布于 2024-12-20 10:35:27 字数 124 浏览 1 评论 0原文

有谁知道如何在tinymce中为Wordpress创建自定义下拉框? 我需要它至少与 WordPress 3.0 一起使用。

我在互联网上搜索了这方面的教程,但找不到。网站教程的链接会很棒。

提前致谢。

Does anyone know how to create a custom dropdown box in tinymce for Wordpress?
I need it to work with at least wordpress 3.0.

I have searched the internet for a tutorial on this and I cannot find one. A link to a website tutorial would be great.

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

瞎闹 2024-12-27 10:35:27

我知道这个问题已经被问过一段时间了,但是当我偶然发现同样的问题时,我认为无论如何我都会回答这个问题。也许它对其他人有帮助。

DropDown-Control 源中的注释<事实证明,tinyMCE 中的 /a> 确实很有帮助。

您只需要先使用createDropMenu() 创建一个下拉菜单,然后就可以调用add() 方法向下拉菜单添加项目。

/**
 * This class is used to create drop menus, a drop menu can be a
 * context menu, or a menu for a list box or a menu bar.
 *
 * @class tinymce.ui.DropMenu
 * @extends tinymce.ui.Menu
 * @example
 * // Adds a menu to the currently active editor instance
 * var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu');
 * 
 * // Add some menu items
 * dm.add({title : 'Menu 1', onclick : function() {
 *     alert('Item 1 was clicked.');
 * }});
 * 
 * dm.add({title : 'Menu 2', onclick : function() {
 *     alert('Item 2 was clicked.');
 * }});
 * 
 * // Adds a submenu
 * var sub1 = dm.addMenu({title : 'Menu 3'});
 * sub1.add({title : 'Menu 1.1', onclick : function() {
 *     alert('Item 1.1 was clicked.');
 * }});
 */

I know this question was already asked some time ago, but as I stumbled across the same problem, I tought I'd answer this question anyways. Maybe it helps someone else.

The comments in the source of the DropDown-Control in tinyMCE turned out to be really helpful.

You just need to create a dropdown first, using createDropMenu(), then you can call the add() method to add items to the dropdown.

/**
 * This class is used to create drop menus, a drop menu can be a
 * context menu, or a menu for a list box or a menu bar.
 *
 * @class tinymce.ui.DropMenu
 * @extends tinymce.ui.Menu
 * @example
 * // Adds a menu to the currently active editor instance
 * var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu');
 * 
 * // Add some menu items
 * dm.add({title : 'Menu 1', onclick : function() {
 *     alert('Item 1 was clicked.');
 * }});
 * 
 * dm.add({title : 'Menu 2', onclick : function() {
 *     alert('Item 2 was clicked.');
 * }});
 * 
 * // Adds a submenu
 * var sub1 = dm.addMenu({title : 'Menu 3'});
 * sub1.add({title : 'Menu 1.1', onclick : function() {
 *     alert('Item 1.1 was clicked.');
 * }});
 */
橘和柠 2024-12-27 10:35:27

这会添加一个按钮,因此您只需调整它以创建一个下拉框,

// register button
function register_button($buttons) {  
   array_push($buttons, "btn");   
   return $buttons;  
}  

// add button
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons', 'register_button');  
   }  
}  

// add plugin
function add_plugin($plugin_array) {  
    $plugin_array['btn'] =get_bloginfo('template_url').'/js/customcodes.js';

   return $plugin_array;  
}  

然后您需要将其添加到 js 文件中

(function() {  
    tinymce.create('tinymce.plugins.btn', {  
        init : function(ed, url) {  
            ed.addButton('btn', {  
                title : 'Add a btn',  
                image : url+'/btn.png',  
                onclick : function() {  
                     ed.selection.setContent('[btn]');  
                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('btn', tinymce.plugins.btn);  
})();  

this adds a button so you just need to tweak it to make a drop down box

// register button
function register_button($buttons) {  
   array_push($buttons, "btn");   
   return $buttons;  
}  

// add button
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons', 'register_button');  
   }  
}  

// add plugin
function add_plugin($plugin_array) {  
    $plugin_array['btn'] =get_bloginfo('template_url').'/js/customcodes.js';

   return $plugin_array;  
}  

you will then need to add the to the js file

(function() {  
    tinymce.create('tinymce.plugins.btn', {  
        init : function(ed, url) {  
            ed.addButton('btn', {  
                title : 'Add a btn',  
                image : url+'/btn.png',  
                onclick : function() {  
                     ed.selection.setContent('[btn]');  
                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('btn', tinymce.plugins.btn);  
})();  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文