We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36760
    • 136 Posts
    Thanks for this extra! I picked it up because I believe it's going to allow me to do something I've always wanted to do in Modx: Add a custom button that lets me pick from a list of database values (from MIGXdb) and then insert all the related information into the editor with the correct html formatting.

    I don't necessarily want something written for me (I'd like to try on my own first), but I'm having trouble getting started. I think the best option is for me to create a Tinymce plugin (https://www.tinymce.com/docs/advanced/creating-a-plugin/). However, when I try to use their sample plugin I can't get the button to show up in the editor.


    • I put the .js file in assets/tinymcewrapper/tinymceplugins
    • Then, I added the plugin path under "external_plugins" in my copy of the TinymceWrapperCommonCode chunk.
    • Finally, I added "example" to the plugins and toolbar sections in my copy of TinymceWrapperContent. I also tried adding the name I used for the plugin under "external_plugins."

    Everything with the TinymceWrapper extra is working fine, I've customized the built-in Tinymce plugins/button using my suffixed chunks without issue.

    I appreciate any help or direction!
      • 42562
      • 1,145 Posts
      RE: firebot6

      Thanks for using and the feedback.

      My crystal ball is broken (cat broke it), so I can't really tell where the issue is, from where I am sitting.
      But do paste me the plugin code you are using, and I will point out where the issue is.

      maybe the issue lies here?
      tinymce.init({
          ...
          plugins: "etc etc", // do not place "example" here
          external_plugins: {
              "example": "/myLocationETCetc/example.js"
          }
      });


      While you are about what you are doing, look into the magnificent Template plugin:
      https://www.tinymce.com/docs/plugins/template/

      Cheers [ed. note: donshakespeare last edited this post 7 years, 2 months ago.]
        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.
        • 47717
        • 144 Posts
        Quote from: donshakespeare at Feb 13, 2017, 07:37 PM
        RE: ananda

        1)
        ...However, the "auto detection" of "css, html, js" stops working in other pages. So basically the "code editor" stops working after this.
        So I disabled this "suffix".
        What can I do to use this suffix, and still keep all functions ?

        If you are using chunkSuffix, you have to alter the name of your Ace/CodeMirror chunks
        TinymceWrapperAce-suffix
        TinymceWrapperCodeMirror-suffix


        Hi,

        I renamed those chunks with that suffix, as they aren't generated automatically. Now the "ace html" editor works again.
        However, now the "introtext" and "description" fields do not have tinyMCE anymore. And the buttons on the editor are all changed now.

        Do I have to rename any more chunks with that suffix ?
          • 47717
          • 144 Posts
          Hi,

          elFinder browser works ok, but I do not see "image thumbs" anywhere.

          When I use an "image TV", and "elFinder" is used, no "thumbnail" image is shown on that resource.

          What am I doing wrong here ?

          (with previous editors this was done automatically out-of-the-box)

          [ed. note: sriananda last edited this post 7 years, 2 months ago.]
            • 47717
            • 144 Posts
            Quote from: donshakespeare at Feb 09, 2017, 10:29 PM
            RE: robcarey

            To speak plainly, sir, I think there be a demon in that thing. MODX + that Editor causes untold rise of that maniacal entity.

            Sorry for not having an answer at hand. I believe I have tried almost everything MODX-wise.

            I can create a plugin to fix that, but that would be another time.

            Hi,

            What a weird disaster. At home TinyMCE Wrapper worked fine, and on my client's PC, it gave that weird error again sad

            Invalid backend response.
            Data is not JSON.


            I was a bit embarassed, I couldn't get anything from the file browser.
            I had to delete on the spot TinyMCE wrapper plugin, and install CKeditor... (what a pity for all the modifications and enthusiasm I had)
              • 42562
              • 1,145 Posts
              RE: Ananda
              I was a bit embarassed, I couldn't get anything from the file browser.
              I had to delete on the spot TinyMCE wrapper plugin, and install CKeditor... (what a pity for all the modifications and enthusiasm I had)

              Nothing should be embarrassing on your client's side if you set everything up properly (all else being equal).
              Besides why uninstall TinymceWrapper because of a misconfigured elFinder?

              There are FOUR browsers to choose from. MODX Browser; elFinder; RFManager; Roxy

              So, I encourage you to reinstall it, unless CKEditor is what you are looking for.

              When I use an "image TV", and "elFinder" is used, no "thumbnail" image is shown on that resource.
              Take a picture of it, so that I understand you.
                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.
                • 3749
                • 24,544 Posts
                @donshakespeare -- I have the same problem with Image TVs in the Manager -- no preview thumbnail, though I'm pretty sure I don't have the current version of TinyMCEWrapper, and I may have it misconfigured.

                I think it happens because MODX prepends the media source baseURL to whatever is in the TV's value field in order to show the image preview (or render the TV tag), that means that the value of the TV needs to be the image path minus the Media Source baseURL.

                This happens with File TVs too, but it's not visible because there's no preview.
                  Did I help you? Buy me a beer
                  Get my Book: MODX:The Official Guide
                  MODX info for everyone: http://bobsguides.com/modx.html
                  My MODX Extras
                  Bob's Guides is now hosted at A2 MODX Hosting
                  • 36760
                  • 136 Posts
                  Quote from: donshakespeare at Feb 15, 2017, 06:41 AM
                  RE: firebot6

                  Thanks for using and the feedback.

                  My crystal ball is broken (cat broke it), so I can't really tell where the issue is, from where I am sitting.
                  But do paste me the plugin code you are using, and I will point out where the issue is.

                  Thanks for the help and the templates idea, I'll dig into that after I figure this out. I believe I tried your idea correctly, but with no luck, below are my chunks.

                  TinymceWrapperCommonCode (this is currently unchanged per your idea)
                  skin_url: MODx.config.assets_url+'components/tinymcewrapper/tinymceskins/modxPericles',
                  link_list:[
                  [[$TinymceWrapperLinkList]]
                  ],
                  relative_urls: false,
                  remove_script_host: false,
                  document_base_url: MODx.config.site_url,
                  link_class_list: [
                    {title: 'None', value: ''},
                    {title: 'prettyLink', value: 'prettyLink'},
                    {title: 'colorBox', value: 'colorBox'}
                  ],
                  image_class_list: [
                    {title: 'None', value: ''},
                    {title: 'prettyPhoto', value: 'prettyPhoto'},
                    {title: 'colorBox', value: 'colorBox'}
                  ],
                  image_caption: true,
                  browser_spellcheck: true,
                  gecko_spellcheck: true,
                  paste_data_images: false,
                  menubar: false,
                  statusbar: false,
                  image_advtab: true,
                  setup: function(editor) {
                    editor.on('keydown', function(evt) { 
                      if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {//ctrl + s = save 
                        evt.preventDefault();
                        $('#modx-abtn-save button').trigger("click");
                      }
                      if (evt.keyCode == 27) { //escape key = remove fullscreen 
                        evt.preventDefault();
                        if ($('.mce-fullscreen').length) {
                          tinymce.activeEditor.execCommand("mceFullscreen")
                        }
                      }
                    });
                    editor.on("init",function() { //float fullscreen link
                    containerId = $(editor.getContainer()).attr("id");
                     $("#"+containerId+" .mce-i-fullscreen").parent().parent().parent().parent().css("float","right");
                    });
                  },
                  external_plugins:{
                    twAceEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twAceEditor.js",
                    // twCodeMirror: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twCodeMirror.js",
                    // bubbleBar: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/tinymceBubbleBar.js",
                    // twExoticMarkdownEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twExoticMarkdownEditor.js",
                    modxMagicHoverLink: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/modxMagicHoverLink.js",
                    twPreCodeManager: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twPreCodeManager.js"
                  },
                  file_browser_callback : autoFileBrowser,
                  //leave trailing comma


                  TinymceWrapperContent
                  tinymce.init({
                    selector: "#ta",
                    [[+commonTinyMCECode]]
                    statusbar: true,
                    plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,emoticons,insertdatetime,lists",
                    external_plugins: {
                          "example": "[[++assets_url]]components/tinymcewrapper/tinymceplugins/example.js"
                    },
                    //paste_word_valid_elements: "a,div,b,strong,i,em,h1,h2,h3,p,blockquote,ol,ul,pre",
                    //valid_elements: "iframe[*],object[*],audio[*],-span,a[href|target|class|rel|title|onclick],-strong,-b,-p[class<text-align-left?text-align-center?text-align-right],br,-h1,-h2,-h3,-figure,-figcaption,-img[!src|!alt],em,-blockquote,pre[class],-ol,-ul,-li,-code,hr[*]",
                    //valid_children: "figure[img|figcaption],-li[ul],-li[ol],-li[div],-strong[*],-em[*],-h1[*],-h2[*],-h3[*],-a[strong|em|h1|h2|h3|p|div],blockquote[p|ol|ul],pre,div",
                    resize: true,
                    autoresize_min_height: 100,
                    toolbar: "preview fullscreen | example undo redo | pastetext |  lists | bold italic aligncenter | bullist numlist | link unlink | image | styleselect charmap searchreplace bubbleBarOptionsButton",
                    contextmenu: "code | twPreCodeManager | fullscreen | removeformat | link | image",
                  });


                  I don't know if it's related, but I'm getting this error in Modx as well: [2017-02-16 20:02:40] (ERROR in modContext::makeUrl @ /home/site/public_html/core/model/modx/modcontext.class.php : 321) Resource with id 155 was not found in context mgr. (If it's not related, don't worry about it at the moment, everything seems to be working fine.)

                  The resource with id 155 is "tw_elfinder_browser".

                  Thanks for the help!
                    • 42562
                    • 1,145 Posts
                    RE: firebot6

                    Looks good. Maybe there is an issue with your plugin. Any errors in your browser's console?
                    You can paste your example.js code here publicly or send to me privately to vet it.

                    Here is how you can test your example.js plugin
                    Paste this in the code area in fiddle.tinymce.com
                    <script type="text/javascript">
                    tinymce.init({
                        selector: "textarea",
                        plugins: "image link",
                        toolbar: "example image link unlink",
                    	external_plugins: {
                    		example: "http://myMODXsite.com/example.js"
                    	}
                    });
                    </script>
                    
                    <form method="post" action="dump.php">
                        <textarea name="content"></textarea>
                    </form>


                    OR, just raw code

                    <script type="text/javascript">
                    tinymce.PluginManager.add('example', function(editor, url) {
                      // Add a button that opens a window
                      editor.addButton('example', {
                        text: 'My button',
                        icon: false,
                        onclick: function() {
                          // Open window
                          editor.windowManager.open({
                            title: 'Example plugin',
                            body: [
                              {type: 'textbox', name: 'title', label: 'Title'}
                            ],
                            onsubmit: function(e) {
                              // Insert content when the window form is submitted
                              editor.insertContent('Title: ' + e.data.title);
                            }
                          });
                        }
                      });
                    
                      // Adds a menu item to the tools menu
                      editor.addMenuItem('example', {
                        text: 'Example plugin',
                        context: 'tools',
                        onclick: function() {
                          // Open window with a specific url
                          editor.windowManager.open({
                            title: 'TinyMCE site',
                            url: 'http://www.tinymce.com',
                            width: 800,
                            height: 600,
                            buttons: [{
                              text: 'Close',
                              onclick: 'close'
                            }]
                          });
                        }
                      });
                    });
                    
                    
                    
                    //actuall INIT
                    tinymce.init({
                    menubar:false,
                        selector: "textarea",
                        plugins: "example image link",
                        toolbar: "example image link unlink"
                    });
                    </script>
                    
                    <form method="post" action="dump.php">
                        <textarea name="content"></textarea>
                    </form>


                    I don't know if it's related, but I'm getting this error in Modx as well: [2017-02-16 20:02:40] (ERROR in modContext::makeUrl @ /home/site/public_html/core/model/modx/modcontext.class.php : 321) Resource with id 155 was not found in context mgr. (If it's not related, don't worry about it at the moment, everything seems to be working fine.)

                    I don't know what would trigger this. But in your TWrapper plugin properties, please replace the TinymceWrapperGRFsnippet with actual elFinder resource url
                    elFinderBrowserRTEurl and elFinderBrowserTopNAVurl
                      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.
                      • 42562
                      • 1,145 Posts
                      RE: BobRay

                      - I have the same problem with Image TVs in the Manager -- no preview thumbnail,

                      Yea, that notorious phpthumb requires that the File/Image Browser return a relative url of the image so that the PHP script can go and generate thumbs - very very annoying. Kinda fought with it for a long time.
                      But I have a solution that might ship in next release.
                        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.