New Community Forums are coming. Watch this space for news.
Subscribe: RSS
  • I am trying to add a custom button on manager tinymce editor something like this https://www.tinymce.com/docs/demo/custom-toolbar-button/.

    On button click event popup will open where i will be showing list of items from 3rd part api, I googled a lot and found few forum posts as well but either they are not identical to what i am searching or too old, which does not resemble with latest modx revo version.

    Does anyone have some clue about it ?

    This question has been answered by amitpatil. See the first response.

    • With http://modx.com/extras/package/tinymcewrapper you are completely free, how you initialize the editor.
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
      • I looked in to that but i coudnt, anyways i found a way to do it in a tunymce way, I will post detailed steps soon and my code as well, so other users can find this post.
        • discuss.answer
          Ok here is how i added a custom menu/button to tinymce editor.

          For this i gone through many plugins they already have,

          1) Create a folder inside modx/assets/components/tinymcerte/js/vendor/tinymce/plugins/vzaar
          - Basic funda is to, whenever you want to add a custom button or menu you have to write a tinymce plugin for that. In my case its "vzaar". All the controls you see on tinymce are actually plugins.
          2) Add below code, and save as plugin.min.js
          tinymce.PluginManager.add("vzaar", function(a) {
              function b() {        
                  var b = a.windowManager.open({ 
                      title: "Vzaar Video List",
                      width: '900',
                      height: '700',
                      url: 'http://localhost/modx/index.php?id=2',  
                  });
          
              }
              a.addCommand("mceCodeEditor", b), 
              a.addButton("Vzaar", { 
                  icon: "media", 
                  tooltip: "Vzaar video", 
                  onclick: b 
              }), 
              a.addMenuItem("Vzaar", { 
                  icon: "media", 
                  text: "Vzaar video", 
                  context: "tools", 
                  onclick: b 
              }) 
          });
          

          3) Open system settings in modx manager and navigate to tinymce settings and find for "tinymcerte.plugins" settings and append your plugin name to existing list like "vzaar"
          4) To return a data from tinymce oppup window use below code
          window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, 'Your contents will go here' );

          • It is rather unfortunate that you have to write a plugin for so simple a task as "custom button". And an upgrade to that Extra might wipe your customization.

            I looked in to that but i couldn't,
            If you need assistance, don't hesitate to ask here:
            https://forums.modx.com/thread/97694/support-comments-for-tinymcewrapper
              TinymceWrapper: Complete back/frontend content solution.
              Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
              5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
            • Quote from: donshakespeare at Jul 28, 2016, 12:59 AM
              It is rather unfortunate that you have to write a plugin for so simple a task as "custom button". And an upgrade to that Extra might wipe your customization.

              I looked in to that but i couldn't,
              If you need assistance, don't hesitate to ask here:
              https://forums.modx.com/thread/97694/support-comments-for-tinymcewrapper

              Your extra is confusing, Don.
              • Quote from: amitpatil at Jul 26, 2016, 09:18 AM
                Ok here is how i added a custom menu/button to tinymce editor.

                For this i gone through many plugins they already have,

                1) Create a folder inside modx/assets/components/tinymcerte/js/vendor/tinymce/plugins/vzaar
                - Basic funda is to, whenever you want to add a custom button or menu you have to write a tinymce plugin for that. In my case its "vzaar". All the controls you see on tinymce are actually plugins.
                2) Add below code, and save as plugin.min.js
                tinymce.PluginManager.add("vzaar", function(a) {
                    function b() {        
                        var b = a.windowManager.open({ 
                            title: "Vzaar Video List",
                            width: '900',
                            height: '700',
                            url: 'http://localhost/modx/index.php?id=2',  
                        });
                
                    }
                    a.addCommand("mceCodeEditor", b), 
                    a.addButton("Vzaar", { 
                        icon: "media", 
                        tooltip: "Vzaar video", 
                        onclick: b 
                    }), 
                    a.addMenuItem("Vzaar", { 
                        icon: "media", 
                        text: "Vzaar video", 
                        context: "tools", 
                        onclick: b 
                    }) 
                });
                

                3) Open system settings in modx manager and navigate to tinymce settings and find for "tinymcerte.plugins" settings and append your plugin name to existing list like "vzaar"
                4) To return a data from tinymce oppup window use below code
                window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, 'Your contents will go here' );


                Where are you putting Step 4?