如何在tinyMCE工具栏中添加自定义按钮？

时间：2011-01-09 作者：Techboy

我想在“添加新帖子”屏幕的tinyMCE工具栏上添加一个自定义按钮，单击该按钮后，将在新帖子中插入文本。

我已尝试使用此代码（从http://tinymce.moxiecode.com/tryit/custom_toolbar_button.php):

wp_admin_css(\'thickbox\');
wp_print_scripts(\'jquery-ui-core\');
wp_print_scripts(\'jquery-ui-tabs\');
wp_print_scripts(\'post\');
wp_print_scripts(\'editor\');
add_thickbox();
wp_print_scripts(\'media-upload\');
setup : function(ed)
{
    // Add a custom button
    ed.addButton(\'mybutton\', 
    {
        title : \'My button\',
        image : \'img/example.gif\',
        onclick : function() 
        {
        // Add you own code to execute something on click
        ed.focus();
        ed.selection.setContent(\'Hello world!\');
        }
    });
}
但它无法编译。错误在\'setup : function(ed)\'

它失败是因为我需要引用tinyMCE吗。js？我在服务器上的WordPress安装下找不到该文件。

有没有更好的方法来创建按钮？

2 个回复
最合适的回答,由SO网友:t31os 整理而成

我认为您的问题是排队和打印脚本后面的行，您将Javascript与PHP混合。。

Javascript位于PHP文件的HTML部分或echo语句中。

This page of the codex 给出了在WordPress中向TinyMCE添加按钮的示例。

然而，该codex条目可能有点过时，因此如果代码出现问题，这里有一些可供选择的代码示例。

http://brettterpstra.com/adding-a-tinymce-button/
https://stackoverflow.com/questions/4413470/how-to-add-a-mailto-button-to-tinymce

RE: Code problems

在PHP文件中，HTML位于PHP块的结束和开始之间，如下所示。。

?>

<div>example</div>

<?php
或者在echo语句中。

echo \'<div>example</div>\';
Javascript应该以与HTML相同的方式处理，因此您上面的代码（JS部分）应该如下所示。。

?>
<script type="text/javascript">
setup : function(ed)
{
     // Add a custom button
     ed.addButton(\'mybutton\', 
     {
          title : \'My button\',
          image : \'img/example.gif\',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent(\'Hello world!\');
     }
});
</script>
<?php
或。。

echo "
<script type=\\"text/javascript\\">
setup : function(ed)
{
     // Add a custom button
     ed.addButton(\'mybutton\', 
     {
          title : \'My button\',
          image : \'img/example.gif\',
          onclick : function() 
          {
          // Add you own code to execute something on click
          ed.focus();
          ed.selection.setContent(\'Hello world!\');
     }
});
</script>
";
在我看来，前者更容易实现。

我希望这能回答你的问题，如果你需要帮助理解一些东西，请告诉我。。

SO网友:Satish Gandham

以下是我在swift主题中使用的代码：

(function() {
    tinymce.create(\'tinymce.plugins.tinyplugin\', {

        init : function(ed, url){
            ed.addButton(\'note\', {
            title : \'Insert a note\',
                onclick : function() {
            var sel = ed.selection.getContent();
                    ed.execCommand(
                    \'mceInsertContent\',
                    false,
                    swift_notice(sel)
                    );
                },
                image: url + "/note.png"
            });
}

function swift_notice(seldata) {
    return \'<p class="note"><span class="bg"> </span>\'+ seldata + \'</p>\';
}

结束
标签： posts   tinymce   小码农  

相关推荐

Get all posts in RSS

我想知道如何/是否可以访问wordpress设置中定义的最新X篇帖子。我见过通过RSS迁移所有博客内容的插件，还没有看到它们的方法。基本上我管理着几百个WordPress博客，我正在为我的客户构建一个新闻稿生成器。他们希望能够选择一些帖子，并将摘录显示在时事通讯正文中。这些网站分布在多个服务器上，新闻稿生成器构建在我们的CRM之上，因此很难直接查询数据库。RSS将是最干净的，但我似乎不知道如何一次访问10个以上的内容（当admin中设置了10个时）。有什么想法吗？