Question

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

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

按钮temp1的名称，如果我点击它，应该在文本编辑器中添加上面的代码，[cf]name[/cf]是从值中显示名称的短代码。

Answer 1

http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addButton

Answer 2

以下是您需要的代码。另外，您需要选择一个图标并将按钮名称添加到您的tinymce init（theme_advanced_buttons1: 'your_button_name, save, table,...'）中的按钮配置中。

  // 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);
     }
  });

wordpress Tinymce按钮显示自定义html div

2 个答案: