On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hello,

    1. did modxNativeBrowserQuirkMode work for you?
    2. if you disable TinymceWrapper plugin do you still have thumbnail issues with MODX native fie browser?
    3. in using rfmUserGroups are you using default properties of that snippet or using custom propertyset?
    4. absolutePATHtoUploadFolder_modx is useless and troublesome without absoluteURLtoUploadFolder_modx -- change both to [[++base_path]]media/ and [[++base_url]]media/ respectively.
    NOTE. [[++base_path]] and [[++base_url]] already end in forward slash.... NO NEED to add /media/...
    5. by, "(not too many buttons ;-)" are you comparing ResponsiveFileManager with something else???

    With #2, if yes - I have no clues. or else I will have to take a look at your setup.
    With #3 if you still have issues, you are most probably doing something wrong that I cannot guess from here
      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.
    • Hello Don,
      #1 modxNativeBrowserQuirkMode does not show thumbnails. The only effect I can see is, it ignores media sources.

      #2 when TW plugin is disabled, thumbnails are still broken.
      On trying this, I see weird behaviour of repeatedly reinstalling TW: standard chunks and snippets don't come back, I only see my suffix-renamed items. I had realized before that I should not suffix the snippets, but kept my renamed version for backup. As it is now, I can't access the connector snippet. responsivefilemanagerConnector does not show, and I can't rename responsivefilemanagerConnector_mysuffix to responsivefilemanagerConnector, as the name already exists. Deleting cache folders does not help.

      #3 rfmUserGroups: my custom property set

      #4 [[++base_path]]media/ and [[++base_url]]media/ - done, but no difference (I tried this first, before the reinstall).

      As it is now, I'm afraid I will have to use a fresh MODX install :-(
      I did a lot of Tiny4 configuring and was very fond of it, so I won't give up so quickly. But for the moment, another project takes my time.

      Thank you, Don, for your patience.
      I come back later.

      Brigitte



        Brigitte Bornemann - Accessibility Consultant, Web Designer - Hamburg / Munich, Germany.
        http://www.bit-informationsdesign.de
      • Hi,

        Trying to figure out how to implement this extra instead of traditional tinyMCE.
        No clue.
        I'm afraid I'm not able to understand a word of this forum thread.

        I desinstalled TinyMce + Codemirror that was running ok.

        I installed the Tinymcewrapper...
        so What's next ?
        No idea ..
        Any explicit doc ?

        Any page edit shows a small (ACE ?) editor for resume, but the content block is BLANK. no menu, nothing inside.

        The TinymceWrapper sample doc display a waiting animated gif and blank contents.

        Opening this sample page on the frontend show a demo stuff asking if NewsPublisher is installed .. huh I dont need this at all.

        the JS console says :
        TypeError: this.getDoc(...) is undefined
        	
        ...dy:function(){return this.bodyElement||this.getDoc().body},convertURL:function(e...


        I found the blog of the author saying : TinymceWrapper Plugin -> properties tab.

        Well properties are locked, nothing is editable there...

        thank you [ed. note: elz064 last edited this post 3 years, 7 months ago.]
        • Quote from: elz064 at Jul 27, 2016, 07:08 AM
          I installed the Tinymcewrapper...
          so What's next ?
          No idea ..
          Any explicit doc ?

          Any page edit shows a small (ACE ?) editor for resume, but the content block is BLANK. no menu, nothing inside.

          The TinymceWrapper sample doc display a waiting animated gif and blank contents.

          [...]

          I found the blog of the author saying : TinymceWrapper Plugin -> properties tab.

          Well properties are locked, nothing is editable there...

          I'll try to describe the steps necessary to make TinymceWrapper run and to configure TinyMCE.

          1. After installing TinymceWrapper, open the plugin of the same name. Open the "Properties" tab. You can unlock the default properties (by clicking on the button "Default Properties Locked") and edit them, but you shouldn't, as default properties could be overwritten by the next update.

            Instead, click on "Add Property Set" and, after the small window opened, on the checkbox labeled "Create New Property Set". Give the new property set a name (I chose "TinymceWrapperCustomSettings") and a short description, then save the new set.

            In the (now empty) select box to the left of the button"Add Property Set", choose the newly created property set. Now you can edit the properties you'd like to change. For the time being, you also have to change the URL to TinyMCE (tinySrc) from //cdn.tinymce.com/4/tinymce.min.js to https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/tinymce.min.js because of an incompatibility with the newest TinyMCE version (this is described earlier in this thread).

            If you'd like to configure TinyMCE itself later, you should also define a suffix in chunkSuffix (I chose "_Custom"). When you're done, click on the button "Save Property Set" - you don't have to save the plugin itself at this point.

          2. To tell the plugin to use the newly created property set, switch to the tab "System Events". There are nine events listed that use the "Default" property set. Double click on the first "Default" value in the "Property Set" column and change it to the property set you created (in my case "TinymceWrapperCustomSettings"). Repeat this for the other eight events, then save the plugin (button "Save" at the top).

          3. If you set a suffix in the "Properties" tab, you'll now have to duplicate the associated chunks. This is a little bit more work than directly using the existing chunks, but this way they are protected, and you can always take a look at the original settings, so you should do it.

            In the "Chunks" area, you'll find the category TinymceWrapper > TinyMCE > Backend with nine chunks whose names are starting with "TinymceWrapper" (plus an additional one that we'll ignore). Within the "Backend" category, create a new category named "Custom" (or whatever you like). Right click on the first of the nine chunks in the "Backend" category ("TinymceWrapperAce") and duplicate it. The new chunk should be named "TinymceWrapperAce_Custom" if you're using the same suffix as I am, otherwise use the suffix you entered in Step 1. Open the newly created chunk and set the category to the one you added before, then save the chunk.

            Now duplicate the other eight chunks starting with "TinymceWrapper"; you can drag them to the new category instead of choosing the category in the chunks themselves.

          4. Now you can configure TinyMCE, if you like. Options that should have an effect on all TinyMCE instances can be set in "TinymceWrapperCommonCode_Custom", the ones for the resource content can be set in "TinymceWrapperContent_Custom", etc. A good starting point is probably https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols.

          5. After configuring the TinyMCE instances, you should clear the cache (just in case...), then all should be ready.

          If something doesn't work as expected or if you have questions regarding the steps, please let us know.

          Cheers,
          Jan
            This message has been ROT-13 encrypted twice for higher security.
          • Thanks @enigmatic_user - quality step by step there.
            @elz064 I hope you sorted things out, or else this latest update should fix all those bugs.
              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.
            • Changelog for TinymceWrapper

              ++SURVIVE UPGRADES: duplicate edited chunks, retain names, add suffix, specify suffix in TinymceWrapper Plugin properties.
              ++CREATE PropertySets where applicable to protect your Plugin and Snippet alterations.
              ++DEPENDENCIES (optional): pdoTools / getResources, tagLister, MODX Resizer, NewsPublisher, MIGX getImageList
              ++ALWAYS START BY viewing the TinymceWrapper Demo Resource (it has everything enabled, frontend/backend)
              ++INCOMPATIBILITIES
              FixedPre (and any Extra running on OnParseDocument) kills TinymceWrapper dead. Bruno17 has found a possible MODX glitch.
              When our TinyJSONGallery is on, Extras Image+ and Gallery do a weird thing of outputting tv path at top of page - will address jako's suggestion before next winter


              ------------------------------
              ++CONFIGURE your RTE: valid_elements + valid_children = unlimited possibilities!!!
              ------------------------------

              TinymceWrapper 2.3.2-pl (aka MIRANDA the beautiful)
              ---------------------------------
              INTRODUCED install option: for demo Resources - experimental!!!
              + Any resources created on install (with unmodified pagetitle) WILL BE REMOVED when TinymceWrapper is uninstalled

              To satisfy June 30th update of official TinyMCE:
              "FIXED so invalid targets for inline mode is blocked on initialization. We only support elements that can have children"

              UPDATED TinymceWrapper Plugin (cleaned up a few bugs)
              + fileManagerTopNavModal... now works again throughout the Manager
              + activateAceOrCodeMirror... now works on Collections (and other third-party newly-created MODX resources)

              UPDATED TinyJSONGallery.js... solved undying spinner

              UPDATED all donShakespeare custom TinyMCE awesome plugins
              //assets/components/tinymcewrapper/tinymceplugins/

              see donShakespeare github repos for detailed latest sweeeetness

              e.g. + twPreCodeManager.js now has:
              true <code> support
              protectMODXsquareBrackets: true,
              protectMODXsquareBracketsXter: "*",
              This applies the fix of critical JS getDoc issue :
              https://forums.modx.com/thread/97694/support-comments-for-tinymcewrapper?page=26#dis-post-542429

              UPDATED TinymceWrapperMarkdown snippet to accomodate "protectMODXsquareBrackets"


              Thanks, TinyMCE (CDN), for keeping me on my toes
              ------------------------------------------------------------------
              ------------------------------------------------------------------
                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.
              • The beauty of using CDN is that you can roll back an entire software integration with one line.
                So, if your TinymceWrapper ever breaks suddenly again, please roll back...
                e.g https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.1/jquery.tinymce.min.js (or one notch below current)

                See the hub here: https://cdnjs.com/libraries/tinymce
                  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.
                • Ok. Looks a little bit clearer now.
                  Seams something is working. Thank you!

                  I have a RTE now but it does not looks like the tinymce I knew. Toolbars are black & white, icons looks like ACE.

                  I'm still puzzled by:
                  Now you can configure TinyMCE, if you like. Options that should have an effect on all TinyMCE instances can be set in "TinymceWrapperCommonCode_Custom", the ones for the resource content can be set in "TinymceWrapperContent_Custom", etc. A good starting point is probably https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols.

                  Obviously I have no idea about how to manage tools bars neither my OWN list of CSS STYLES I had previously within tinymce menus ( you know, the system parameters settings : editor_css_path + editor_css_selectors )
                  those ones are found in core/rte settings

                  But with the classic tinymce add-ons there was a large bunch os settings found in tinymce, with 36 différents settings.

                  I don't see where/how to reproduce those settings now.

                  • Feature request: It would be useful for me if I could load or 'transform' certain fields but have them disabled by default.

                    For instance, I'd like Content to be enabled by default but description and introtext to be disabled, but able to be enabled.

                    This would help our content editors focus better.

                    Love your work. Thanks!

                    -John
                    • @elz064: Sorry, I had forgotten to subscribe to the thread, so I missed your answer. I hope I'm not too late...

                      Quote from: elz064 at Aug 02, 2016, 07:26 AM
                      I have a RTE now but it does not looks like the tinymce I knew. Toolbars are black & white, icons looks like ACE.
                      Well, yes, it's the next major version of TinyMCE and a different theme / skin. You can use a different theme / skin, if you like, though. I'm not sure if there is still one matching the old theme (I like the new one), but maybe you can find one that matches your needs or your taste better. Some skins for TinyMCE 4 are listed at http://archive.tinymce.com/download/plugins.php?tag=4 (just search for others using Google). You could also create your own.

                      Quote from: elz064 at Aug 02, 2016, 07:26 AM
                      Obviously I have no idea about how to manage tools bars neither my OWN list of CSS STYLES I had previously within tinymce menus ( you know, the system parameters settings : editor_css_path + editor_css_selectors )
                      those ones are found in core/rte settings

                      But with the classic tinymce add-ons there was a large bunch os settings found in tinymce, with 36 différents settings.

                      I don't see where/how to reproduce those settings now.
                      The configuration might be a little bit more difficult / less comfortable (or just unfamiliar) now, but all in all you have more possibilities. Before you had a bunch of given settings (36 as you said), but now you should be able to use every single option TinyMCE itself offers.

                      You'll have to read a bit of documentation and maybe try some things before everything is perfect, but it's worth it.

                      The settings can be found (and edited) in the chunks you (hopefully) duplicated in step 3 of my little guide. If you open the chunk "TinymceWrapperContent_Custom", for example, you can edit the settings for the editor used for the content of a resource. It starts with

                      tinymce.init({

                      followed by the settings for this editor instance. You can edit these settings or delete or add some. Things you change here will only affect the editor for the content of a resource, so you can have different settings for the different editor instances.

                      Almost at the top of this chunk you'll find the line

                      [[+commonTinyMCECode]]

                      Here the chunk "TinymceWrapperCommonCode_Custom" is inserted. What you change in that chunk will affect all editor instances (the ones for the resource content, for the rich-text TVs ["TinymceWrapperTVs_Custom"], for the description field ["TinymceWrapperDescription_Custom"], etc.).

                      Now you can begin to study the TinyMCE documentation. You can start with Editor Appearance; here you can learn how to turn the menubar on and off or add additional toolbars, etc. You'll find the same

                      tinymce.init({

                      line there, so it shouldn't be too difficult to see what to do (I'll add the contents of two of my chunks later, so you can compare them with the default contents of the chunks).

                      Once you found out how to add additional toolbars, you should check which buttons to add. The documentation page Editor Control Identifiers shows you the available button names and also which plugin is needed for each button. So you could change the toolbar configuration now from

                      toolbar: "preview fullscreen | twPreCodeManager code | undo redo | newdocument | blockquote | bold italic aligncenter | bullist numlist | link unlink | image | charmap emoticons insertdatetime searchreplace bubbleBarOptionsButton",

                      to

                      toolbar1: "preview fullscreen code | undo redo | pastetext | link unlink | image | table | charmap insertdatetime | searchreplace",
                      toolbar2: "bold italic subscript superscript | bullist numlist | styleselect | formatselect | template",

                      You also have to change the list of used plugins (near the top of the chunk) to

                      plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,insertdatetime,template,table",

                      After saving the chunk, you should now see two rows of buttons and some other options than before.

                      The content_css setting you asked for can also be used in the chunks, see Content Appearance. You can add the URL of your CSS file there, just like before.

                      The block elements can be set via

                      block_formats: "Absatz=p;Überschrift 2=h2;Überschrift 3=h3;Überschrift 4=h4;Überschrift 5=h5;Überschrift 6=h6;Zusammenhängender Bereich=div;Zitatblock=blockquote",

                      (I'm from Germany, so I used German names). The CSS styles you mentioned can be defined this way:

                      style_formats: [
                        {
                          title: 'Interviews: Name',
                          selector: 'p',  // ,div
                          classes: 'interviewSpeakerName'
                        }
                      ],

                      These settings are described in Content Formatting.

                      There's much more you can configure and of course corresponding documentation. I guess you'll find some interesting possibilities.

                      As promised, here two of my chunks:


                      TinymceWrapperContent_Custom

                      tinymce.init({
                        selector: "#ta",
                        [[+commonTinyMCECode]]
                        statusbar: true,
                        plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,insertdatetime,template,table",
                        //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",
                        style_formats: [
                          {
                            title: 'Interviews: Name',
                            selector: 'p',  // ,div
                            classes: 'interviewSpeakerName'
                          }
                        ],
                        block_formats: "Absatz=p;Überschrift 2=h2;Überschrift 3=h3;Überschrift 4=h4;Überschrift 5=h5;Überschrift 6=h6;Zusammenhängender Bereich=div;Zitatblock=blockquote",
                        // use "url" instead of "content" to insert the content of a file
                        templates: [
                          {
                            title: 'Bild-Container links - Bild vorher im Editor markieren!',
                            description: 'Container für links angeordnetes Bild mit Bildunterschrift - Bild bitte vorher im Editor markieren!',
                            url: '/assets/tinymce/templates/image_container_left.html'
                          },
                          {
                            title: 'Bild-Container rechts - Bild vorher im Editor markieren!',
                            description: 'Container für rechts angeordnetes Bild mit Bildunterschrift - Bild bitte vorher im Editor markieren!',
                            url: '/assets/tinymce/templates/image_container_right.html'
                          }
                        ],
                        template_selected_content_classes: 'imageInnerContainer',
                        resize: true,
                        autoresize_min_height: 100,
                        toolbar1: "preview fullscreen code | undo redo | pastetext | link unlink | image | table | charmap insertdatetime | searchreplace",
                        toolbar2: "bold italic subscript superscript | bullist numlist | styleselect | formatselect | template",
                        contextmenu: "code | twPreCodeManager | fullscreen | removeformat | link | image",
                        content_css: '/assets/css/rich_text_editor/rte_styles.css',
                        invalid_elements: 'u',
                        convert_fonts_to_spans: true
                      });


                      TinymceWrapperCommonCode_Custom

                      language: 'de',
                      language_url: MODx.config.assets_url+'components/tinymce_lang/de.js',
                      insertdatetime_formats: [
                        "%d.%m.%Y",         // 24.07.2016
                        "%Y-%m-%d",         // 2016-07-24
                        "%a., %d.%m.%Y",    // Mo., 24.07.2016
                        "%a., %d. %b. %Y",  // Mo., 24. Jul. 2016
                        "%A, %d. %B %Y",    // Montag, 24. Juli 2016
                        "%H:%M:%S Uhr",     // 17:24:57 Uhr
                        "%H:%M Uhr"         // 17:24 Uhr
                      ],
                      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"
                      },
                      twAceEditorSettings: {
                        twPopped: 0,  // 1 = popped (default) or 0 = inline
                      },
                      file_browser_callback : autoFileBrowser,
                      //leave trailing comma


                      I hope this helps to get you started...

                      Cheers,
                      Jan
                        This message has been ROT-13 encrypted twice for higher security.