Button wordpress微型mce按钮以显示自定义html div

我试图添加一个小小的mce按钮来显示这样的模板

<div class ="template1">
<img src="" />
<span>
<b>name:[cf]name[/cf] </b>
<span>
</div>

姓名：[cf]姓名[/cf]

---

如果单击按钮temp1，应在文本编辑器中添加上述代码，

[cf]name[/cf]

是从值显示名称的短代码。

以下是您需要的代码。此外，您还需要选择一个图标，并将按钮名称添加到tinymce init中的按钮配置中（

theme\u advanced\u buttons1:“您的按钮名称，保存，表格，…”

）

//注册示例按钮
ed.addButton（'示例'{
标题：“姓名：[cf]姓名[/cf]”，
图像：“../jscript/tiny_mce/plugins/example/img/example.gif”，
onclick:function（）{
//alert（'Hello world！！Selection:'+ed.Selection.getContent（{format:'text'}））；
变量内容='name:[cf]name[/cf]'；
ed.execCommand（'mceInsertContent'，false，content）；
}
});

如何在wordpress functions.php中添加此功能？

  // Register example button
  ed.addButton('example', {
     title : 'name:[cf]name[/cf]',
     image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
     onclick : function() {
        //ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
        var content = '<div class ="template1"><img src="" /><span><b>name:[cf]name[/cf] </b><span></div>';
        ed.execCommand('mceInsertContent', false, content);
     }
  });