如何实现按钮插入图像微小的mce

时间:2013-09-25 13:36:41

标签: image button tinymce

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

这是我的源代码:

$(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

1 个答案:

答案 0 :(得分:0)

您可以尝试: 在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/