2016-12-05 78 views
0

我一直在嘗試添加自己的菜單,並且必須做錯某些事情。這裏是我到目前爲止,這是非常簡單的從一些示例代碼外殼:TinyMCE添加菜單問題(帶插件)

tinymce.html - 網頁,我承載的textarea和初始化代碼:

<!-- /TinyMCE --> 
    <script type="text/javascript"> 
    tinyMCE.init({ 
    mode: "textareas", 
    skin: "o2k7", 
    theme: "advanced", 
    plugins: "mymenu,fullpage,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
    theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
    theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
    theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
    theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
    toolbar: "mymenu", 
    theme_advanced_toolbar_location: "top", 
    theme_advanced_toolbar_align: "left", 
    theme_advanced_resizing: false, 
    extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" 
}); 
</script> 
<!-- /TinyMCE --> 

<body> 
    <form method="post"> 
     <textarea name="tinyMceEditor" cols="1" rows="1" style="width:100%; height: 100%"></textarea> 
    </form> 
</body> 

您可以看到該插件「 mymenu'和工具欄'mymenu'在TinyMCE的初始化中。

對於插件,它位於帶有editor_plugin.js約定的/ Plugins/mymenu /目錄中。我知道它正在加載它,因爲如果我向文件引入錯誤,我會收到警告。

editor_plugin.js:

(function() { 
tinymce.create('tinymce.plugins.mymenu', { 

    init: function (editor, url) { 

     editor.addButton('mymenu', { 
      type: 'menubutton', 
      text: 'My Menu', 
      icon: false, 
      menu: [{ 
       text: 'Data Loop', 
       onclick: function(){ 
        editor.insertContent('{DataLoop}'); 
       } 
      }, { 
       text: 'Collector Loop', 
       onclick: function(){ 
        editor.insertContent('{CollectorLoop}'); 
       } 

      }] 

     }); 

    } 
}); 

// Register plugin 
tinymce.PluginManager.add('mymenu', tinymce.plugins.PageBreakPlugin); 

})(); 

它看起來對我來說,我所擁有的一切是正確的。但是 - 沒有菜單顯示。只需4個工具欄按鈕,如init代碼中的按鈕1-4所示。

編輯:我曾嘗試刪除所有高級按鈕,更改主題,以簡單,相當多的其他選擇。仍無法得到這個簡單的菜單出現:(

回答

0

這裏是顯示在菜單兩個項目實施的整個自定義菜單TinyMCE的小提琴:

http://fiddle.tinymce.com/JDfaab

您不必創建一個實現自定義菜單項或工具欄按鈕的插件 - 你可以直接在你的配置對象中實現,如果你真的想要一個插件,你可以把這個例子移動到你自己的插件上。

+0

我用這個小提琴把它直接進入HTML文件的init部分仍然不顯示菜單:( – Andrew

+0

你能不能e TinyMCE你正在做什麼的小提琴? –

+0

就是這樣......我在CodePen中這樣做沒問題:http://codepen.io/bdogi/pen/KNRaVm。當我在HTML文件中這樣做時,我得到一個空白但大的文本區域。沒有菜單。 – Andrew