2012-02-08 2 views
2

Использование JQuery TinyMCE, я пытаюсь зарегистрировать собственный «плагин» (это на самом деле просто меню в панели инструментов)Создать и зарегистрировать TinyMCE плагин с JQuery

Я пытаюсь получить это зарегистрироваться, но код, который я нашел на http://www.tinymce.com/tryit/menu_button.php, похоже, не работает с jQuery-версией TinyMCE. В идеале, я хотел бы иметь свой собственный код плагина в отдельном файле js.

TinyMCE сценарий инициализации

// Start TinyMce Editor 
    $('#Template_Html').tinymce({ 
     // Location of TinyMCE script 
     script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")', 

     // General options 
     theme: "advanced", 
     plugins: "marcusinserts,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", 

     // Theme options 
     theme_advanced_buttons1: "fullscreen,preview,code,|,cleanup,removeformat,|,undo,redo,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent,indent,blockquote,|,bullist,numlist,|,sub,sup,|,template,viewhtmlversion,taginserts", 
     theme_advanced_buttons2: "bold,italic,underline,strikethrough,|,formatselect,|,link,unlink,anchor,image,|,forecolor,backcolor,|,tablecontrols,|,charmap,iespell,advhr", 
     theme_advanced_buttons3: "", 
     //theme_advanced_buttons3: "tablecontrols,|,hr,visualaid,|,sub,sup,|,charmap,iespell,advhr", 
     //theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", 
     theme_advanced_toolbar_location: "top", 
     theme_advanced_toolbar_align: "left", 
     theme_advanced_statusbar_location: "bottom", 
     theme_advanced_resizing: false, 

     // Example content CSS (should be your site CSS) 
     //content_css:'/Portal/Content/admin.css', 

     // Drop lists for link/image/media/template dialogs 
     template_external_list_url: "lists/template_list.js", 
     external_link_list_url: "lists/link_list.js", 
     external_image_list_url: "lists/image_list.js", 
     media_external_list_url: "lists/media_list.js", 

     // Preview options 
     plugin_preview_width: "725", 
     plugin_preview_height: "600", 

     // Replace values for the template plugin 
     template_replace_values: { 
      username: "Some User", 
      staffid: "991234" 
     }, 

     // View HTML Version insert button 
     setup: function (ed) { 
      ed.addButton('viewhtmlversion', { 
       title: 'Insert View HTML version link', 
       image: '@Url.Content("~/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif")', 
       onclick: function() { 
        ed.focus(); 
        ed.selection.setContent('<a href="{VR_HOSTED_LINK}">Click to view this email in a browser</a>'); 
       } 
      }); 
     } 
    }); 
    // End TinyMce Editor 

плагин Я пытаюсь создать и настроить:

tinymce.create('tinymce.plugins.MarcusInserts', { 
createControl: function (n, cm) { 
    switch (n) { 
     case 'taginserts': 
      var c = cm.createMenuButton('taginserts', { 
       title: 'Tag Inserts', 
       image: '/Scripts/tinymce/themes/advanced/img/custom-icon-view-html.gif', 
       icons: false 
      }); 

      c.onRenderMenu.add(function (c, m) { 
       m.add({ title: 'View in Browser', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1'); 
       } 
       }); 

       m.add({ title: 'Forward Link', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2'); 
       } 
       }); 

       m.add({ title: 'Social Media', onclick: function() { 
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2'); 
       } 
       }); 
      }); 

      // Return the new menu button instance 
      return c; 
    } 

    return null; 
} 
}); 

// Register plugin with a short name 
tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts); 
+0

, пожалуйста, напишите полную конфигурацию tinymce config/init – Thariama

+0

отлично ... точный запрос, который мне нужен – Stefan

ответ

2

Ваш вопрос не указывается вы ли вы на самом деле пытается загрузить этот плагин из папки плагина, поэтому этот оператор может не применяться в отношении вашей проблемы, но я добавлю для полноты:

Поскольку версия JQuery TinyMCE изменяется порядок, в котором инициируются вещи (например: вы не можете ссылаться на объект tinymce до того, как вы вызвали $('textarea').tinymce(...), вы не можете добавить плагин так же, как и простой пример плагина на своем сайте. Вы должны создать автономный плагин.

Я собираюсь предположить, что вы следовали инструкциям на How to create an TinyMCE plugin here.

Этот вопрос у вас есть, что вы загружаете плагин: plugins: "marcusinserts,..., но в нижней части вашего плагина вы «повторно регистрируя плагин со ссылкой

tinymce.PluginManager.add('marcus-inserts', tinymce.plugins.MarcusInserts);

попытаться изменить что:

tinymce.PluginManager.add('marcusinserts', tinymce.plugins.MarcusInserts); (обратите внимание на удаление - между словами marcus и inserts.

+0

Спасибо за дополнительную информацию. Я не смотрел на это какое-то время, но я попробую в ближайшее время и дам вам знать, как это работает! И да, я следил за документом, на который вы ссылались выше, просто не мог заставить его работать с версией jquery. Надеюсь, это поможет! - Мэтт –

+0

Привет @mmillican, как он пошел? Могли ли вы добавить плагин успешно? – user961627

Смежные вопросы