We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 42562
    • 1,145 Posts
    Official TinyMCE has been updated to 4.3.1 - massive improvements!
    If using ​TinymceWrapper, go to its plugin -> ​​tinySrc​​, enter the new link //cdn.tinymce.com/4/tinymce.min.js

    Learn more http://blog.tinymce.com/2015/11/24/tinymce-4-3-brings-new-features-stability-improvements/
      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
      tinymceBubbleBar.js
      Download latest and Fiddle demo https://github.com/donShakespeare/tinymceBubbleBar

      First and only awesome floating air bubble toolbar for TinyMCE (all modes).
      Inspired by popline.js, medium-editor clone and medium.com - but more powerful than they smiley

      USAGE
        tinymce.init({
          selector: "#myEditor",
          menubar: false, //or true
          //inline: true, //or false
          //fixed_toolbar_container: "#myOwnBarWrapper", // use with inline mode
          toolbar: "bold italic underline bubbleBarOptionsButton", //add button to make bar sticky etc
          //bubbleBarCSSstyle: 'background:white;',  // any CSS except positions top & left
          external_plugins: {
            bubbleBar: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/tinymceBubbleBar.js", // file location
          }
      });

      In TinymceWrapper, to affect all editors at once, call external_plugins: {... in your TinymceWrapperCommonCode chunk.
      Or else, make the call in your individual init chunks.

      Future TinymceWrapper will come packaged with this.
      ENJOY - blessed Christmas in advance! [ed. note: donshakespeare last edited this post 8 years, 4 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.
        • 36624
        • 535 Posts
        Hello, at first i come here with a question :

        "How do you make link_list work in a multicontext/language setup (with babel for example) ?"

        ...and then i manage to find a solution myself smiley

        just change the $TinymceWrapperLinkList (chunk) like this :

        {
            title: "Français",
            value: '#',
            menu: [
            	[[pdoMenu?
        		    &parents=`0`
        		    &context=`web` <-------- SPECIFY HERE
        		    &level=`0`
        		    &limit=`0`
        		    &showHidden=`1`
        		    &tplOuter=`@INLINE [[+wrapper]]`
        		    &tpl=`@INLINE {title: "[[+menutitle]]", value: '[[+link]]'},`
        		    &tplParentRow=`@INLINE {title: "[[+menutitle]]", value: '[[+link]]', menu:[ [[+wrapper]]  ]},`
        		    &sortby=`menuindex`
        		    &sortdir=`ASC`
        		]]
        	 ]
            }, 
        {
            title: "Allemand",
            value: '#',
            menu: [
            	[[pdoMenu?
        		    &parents=`0`
        		    &context=`de` <-------- SPECIFY HERE
        		    &level=`0`
        		    &limit=`0`
        		    &showHidden=`1`
        		    &tplOuter=`@INLINE [[+wrapper]]`
        		    &tpl=`@INLINE {title: "[[+menutitle]]", value: '[[+link]]'},`
        		    &tplParentRow=`@INLINE {title: "[[+menutitle]]", value: '[[+link]]', menu:[ [[+wrapper]]  ]},`
        		    &sortby=`menuindex`
        		    &sortdir=`ASC`
        			]]
         		]
            },
        


          CTRL+SHIFT+U - Clear Cache
          CTRL+SHIFT+H - Hiding Heft Panel
          CTRL+SHIFT+N - Fast Create Resource
          CTRL+ALT+P - Preview Recource (in edit resorce window)
          CTRL+ALT+S - Save
          • 42562
          • 1,145 Posts
          Re:empiguet
          Very nice!
          Glad you got it sorted out, and thanks for sharing. [ed. note: donshakespeare last edited this post 8 years, 4 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.
            • 42562
            • 1,145 Posts
            twCodeMirror.js
            Download latest and Fiddle demo https://github.com/donShakespeare/twCodeMirror

            A better approach to viewing and editing code in TinyMCE
            This uses the most advanced code editor, CodeMirror (CDN)

            USAGE
              tinymce.init({
                external_plugins: {
                  twCodeMirror: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twCodeMirror.js", 
                },
                twCodeMirrorPoppedOrInline: 1, //1 for popped (default), 0 for inline
                toolbar: "code",
                contextmenu: "code"
             });

            Roadmap
            Expose some more CodeMirror settings
            Sync cursor position between TinyMCE and CodeMirror

            Cheers
              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
              modxMagicHoverLink.js
              Download latest https://github.com/donShakespeare/modxMagicHoverLink

              An ingenious way to use TinyMCE to do the infamous thing called, internal linking. A replacement to the TinyMCE link plugin, backend only. While using pdoTools to populate link_list is great for backend/frontend, some users asked for a little more backend magic that harnesses the existing power of MODX; then modxMagicHoverLink was born.

              No dragging to dropping nothing, just hover!!! works with Resource Tree and that nice Resource Search in MODX 2.4.2 - option to use Resource Description to fill the title attr​ in <a href="..." title="...">text</a>. For those still doing internal linking, I call this 'simply fabulous.' Enjoy the present.

              Merry and blessed Christmas to you all.

              USAGE
                tinymce.init({
                  external_plugins: {
                    modxMagicHoverLink: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/modxMagicHoverLink.js"
                  },
                  toolbar: "link unlink"
                });
              [ed. note: donshakespeare last edited this post 8 years, 4 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.
                • 42562
                • 1,145 Posts
                - Added two options:
                ......hoverStripMODXurl - tell TinyMCE to clean up or not, your internal links
                ......hoverAddCLASStoTree - add padding to Resources in resource tree for easy hovering

                - Now you can hover over resources in ​Link List​. Solves the 'problem' of pdoMenu and TinyMCE not making parent resources clickable.
                - Works both back and front end... sweet!
                  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.
                  • 44195
                  • 293 Posts
                  Hi!
                  Just installed tinymcewrapper and I don't seem to have the richtext fields displaying.
                  I've attached an image to show you what I mean.

                  Is there anything I need to do after installing the extra?

                  If I untick the boxes I get the plain text field with the markup showing.
                    I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
                    Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com
                    • 42562
                    • 1,145 Posts
                    Weird behaviour. Please send me what errors the browser is displaying
                      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
                      TinymceWrapper 2.2.0
                      ---------------------------------
                      ADDED extra security and removed unused html files to prevent unwanted access to custom file browsers
                      UPDATED elFinder to 2.1.5

                      ADDED Imogen Theme to replace old template
                      This novel Theme uses the powerful TinyMagicPublisher, which force-feeds NewsPublisher with some out-of-the-planet legal-status-to-be-determined enhancers. NO AJAX!!!, just sheer Power!!!! get it, get it?
                      In the frontend (requires NewsPublisher), edit any thing on the page, even background images, tooltips, accordions, etc

                      ADDED new TinyMCE skin:
                      fallenMacbeth.
                      Updated ONLY fairOphelia skin to reflect the latest font icons of TinyMCE 4.3.2+
                      ADDED modxMagicHoverLink.js Plugin
                      handcrafted just for you! a wonderful way to do MODX internal linking. Just hover over any resource in the resource tree, or search results, or pdoMenu link_list
                      ADDED tinymceBubbleBar.js Plugin
                      handcrafted just for you! the first of its kind to come into the TinyMCE world - a floating and gorgeous toolbar
                      ADDED twCodeMirror.js Plugin
                      handcrafted just for you! use the most powerful code editor via CDN to view your RTE source code. A beautiful experience with Live edit/preview.
                        //added BUTTONS to individual init chunks
                          toolbar: "code bubbleBarOptionsButton",
                          contextmenu: "code",
                      
                          //added to Common Code chunk
                          bubbleBarCSSstyle: 'background:white;',  // any CSS except positions top & left
                          twCodeMirrorPoppedOrInline: 0, // 1 for popped (default), 0 for inline
                          //hoverStripMODXurl:false, //default is true
                          //hoverAddCLASStoTree:false //default is true
                          external_plugins: {
                            modxMagicHoverLink: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/modxMagicHoverLink.js",
                            bubbleBar: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/tinymceBubbleBar.js",
                            twCodeMirror: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twCodeMirror.js"
                          }

                      These awesome plugins are housed and regularly updated on github
                      e.g https://github.com/donShakespeare/modxMagicHoverLink

                      ADDED TinyJSONGallery Snippet - (requires MODX Resizer)
                      What is Content Editing without them images?
                      Awesome and Beautiful GUI, built on components you know too well; that means you can redesign/skin the backend GUI for your clients. Are you still with me?
                      Your album is any MODX chunk, that means, you see all your albums in the element tree ... hmmm, nice!
                      No need to re-upload anything. Seriously? Yes! your chunk album talks directly to your folder (wherever it is on your server).
                      No extra database stuff, just pure JSON (always before your eyes) that anybody can generate, even a toddler.
                      Absolute and Complete and Total control for all frontend uses. Use the provided snippet (TinyJSONGalleryOutput) to output your images, or create your own snippet or use the most powerful MIGX, getImageList.
                      TinyJSONGallery is an idea I am offering for free, steal it, take it, run with it, extend it to fit all your needs. It is a different idea, love it or hate it!
                            //USE NATIVE
                            <ol id="gallery">
                            [[TinyJSONGalleryOutput? &galleryChunkOrJson=`[[$NatureAlbum_myGallery]]` &tpl=`NatureAlbum_rowTpl` &imgCls=`pic` &rowCls=`magic` &linkCls=`linked`]]
                            </ol>
                      
                            //USE MIGX
                            <ol id="tw_gallery">
                            [[getImageList? 
                            &where=`{"tag:=":"michael","hidden:<":"1"}`
                            &sort=`[{"sortby":"index","sortdir":"DESC","sortmode":"numeric"},{"sortby":"name","sortdir":"ASC"}]` &value=`[[$NatureAlbum_myGallery]]` &tpl=`NatureAlbum_rowTpl` &imgCls=`pic` &rowCls=`magic` &linkCls=`linked`]]
                            </ol>


                      ADDED TinyMagicPublisher Snippet - (requires NewsPublisher)
                      TinyMagicPublisher accepts all the options of NewsPublisher and much more.
                      Plus frontend init tpls for you to meddle with.
                      Near-perfect frontend editing for MODx - edit like it's the future of which you are the boss.
                      Just as you are reading your article, click the edit button, the page will then allow you to click and edit ANY and ALL specified areas of the page, no forms whatsoever to deal with. This is not WYSIWYG, this is EBYOWTCW, Edit Beautifuly, Your Own Way, the Clean Way!
                      Access your favourite custom file browsers from the frontend (MODx Manager not supported for domestic and foreign reasons)
                      Create new resources on the fly from any resource.
                      Edit your own page or if you are an Admin or Chief Editor, the page of others
                      Easily extend to accomodate any and all MODx fields.

                      If all this magic is too much for you to handle, and you rather stick to the old ways - TinyMagicPublisher comes in two modes, hurray!!!

                      ADDED customJS and customJSchunks option. Now can have TinyMCE init for any and all 3rd Party Extras that require RTE. In fact anywhere you see a textarea in your MODX Manager. Can also run custom non-TinyMCE related JavaScript to spice up your MODX Manager - no need to create a whole new plugin for that.

                      ADDED more element categories to help sort and structure the element tree of chunks and whatnots

                      ADDED addTinyMCEloadDelay to TinymceWrapper Plugin
                      Default: 0. When using with an Extra that produces textareas on the fly, you might need a delay. 2100 works with Lingua. The longer the delay, the badder the user experience.
                      ADDED sample.TinymceWrapperMIGX to support MIGX 2.9.5+ - thanks to Bruno17

                      ADDED to common code/quick update/TVs init chunks:
                      Use escape key to remove fullscreen in all MODx textareas
                      In Quick update/create resource textarea, escape button will first remove fullscreen, if pressed again, will close modal window

                      file_browser_callback : autoFileBrowser: this will suffice for all the supported browsers, including Responsive Filemanager.

                      Responsive Filemanager: no need to use the hideous two-step activation.
                      Removed need to use to external_plugin command (you can put it back if you want)

                      Stripped popup=1 from responsivefilemanagerBrowserRTEurl
                      (MODx.config.assets_url+"components/tinymcewrapper/responsivefilemanager/filemanager/dialog.php?type=0")

                      ADDED options to responsivefilemanagerConnector to support use of custom autocreate snippet and chunk (autoCreateFoldersTWrfmSnippet responsivePersonalConfig)
                      ADDED modxNativeBrowserTopNAVpresent to Plugin. Toggle the top nav media link ON/OFF
                      ADDED option to hide native browser link when custom browser is in use.
                      ADDED optional smart modal to custom browser link in TopNAV menu - will check if user has TinyMCE running or not. MODAL depends on TinyMCE API or else just normal browser pop up. Modal can be turned off completely.

                      Fixed Roxy file browser not working for File/Image TVs in backend
                      Fixed mousedown/mouseup issue with enable/disable TinyMCE in Manager textareas
                      Fixed issue where enable/disable TinyMCE checkbox not functioning as expected when specific TVs were targeted.
                      Also fixed TV reset which was not working on the editor when the checkboxes are disabled in the plugin.
                      Add some CSS to richtext textareas, so that when you switch back and forth from TinyMCE you e not met with the hideously sized one.
                      Changed tinyTVcheck to pure JS function
                      Now, all richtext TVs, or only particular ones, #tv1, #tv2
                       tinymce.init({
                               mode : "exact",
                               selector : "#tv1,#tv2,#tv3",
                               ...
                             })

                      To include non Rich TVs use
                      ...selector: ".modx-richtext,textarea[id^=tv][class!=modx-richtext]",...
                        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.