如何实现按钮插入图像tinymce答案

【问题标题】：How to implement button insert image tiny mce如何实现按钮插入图像tinymce
【发布时间】：2013-09-25 13:36:40
【问题描述】：

我正在开发自己的图像管理器，直到现在我已经打开弹出窗口并列出我的图像，但是在此之后我不知道如何获取图像的 URL 以插入到小 mce 中

这是我的源代码：

$(document).ready(function() {
        $('#txapublication').tinymce({
            toolbar: 'styleselect | bold underline italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | media | forecolor backcolor',
            plugins: [
                'advlist image autolink link lists charmap preview',
                'searchreplace wordcount code media',
                'save textcolor'
            ],
            menubar: false,
            language: 'es',
            file_browser_callback: function(field_name, url, type, win) {
                win.document.getElementById(field_name).value = 'my browser value';
                tinymce.activeEditor.windowManager.open({
                    title: 'Browse Image',
                    file: "<? echo PUBLIC_PATH ?>" + 'account/selimgsblog',
                    width: 450,
                    height: 305,
                    resizable: "no",
                    inline: "yes",
                    close_previous: "no",
                    buttons: [{
                            text: 'Insert',
                            classes: 'widget btn primary first abs-layout-item',
                            disabled: true,
                            onclick: 'close'
                        }, {
                            text: 'Close',
                            onclick: 'close',
                            window: win,
                            input: field_name
                        }]
                });
            }
        });
   });

这是我列出图像的来源，这些图像来自控制器中的方法

<?foreach($imagenes as $img):?>
<img src="<? echo PUBLIC_PATH.$img->path.$img->name?>" width="80" height="80"/>
<?endforeach;?>

我使用的是微型 mce 4.0.6

【问题讨论】：

标签： image button tinymce

【解决方案1】：

您可以尝试：在buttons.js中

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            icon: 'my-mce-icon',
            onclick: function() {
                editor.insertContent('[shortcode name="" title=""]');
            }
        });
    });
})();

这里需要在functions.php中像这样使用按钮作为背景：

function my_shortcodes_mce_css() { ?>
<style type="text/css" >
.mce-ico.mce-i-my-mce-icon {
  background:url(http://prowpexpert.com/wp-content/uploads/2014/05/favicon-1.ico);
}
</style>
<?php  
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

您可以从这里获得有关 wp tiny mce 按钮的帮助：http://prowpexpert.com/dynamic-tab-html-wp/

【讨论】：