We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered TinyMCE - adding a link to an image not working

    • 40578
    • 10 Posts
    heather Reply #1, 10 years, 9 months ago
    Site details:
    MODX Revolution 2.2.8-pl (traditional)
    PHP Version 5.3.24
    Running on an apache server

    Problem:
    When using TinyMCE, I've inserted an image, selected that image, and clicked the insert/edit hyperlink button. The window pops up and I add the URL of where I want the image to link to. Then I click update. Instead of closing the popup window and adding the hyperlink - the popup window shows up again, without the URL I've just added, and the link isn't added to the image. Any suggestions/ideas?

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

      • 39333
      • 151 Posts
      Eric SWD Reply #2, 10 years, 9 months ago
      I'd start with the normal stuff. Clear cache folder manually, flush sessions, clear browser cache, close browser window, re-open, try again.

      As this may also be a bug related to your TinyMCE I would probably uninstall and completely remove it, flush everything, reinstall and try again.

      If it still doesn't work I'd try viewing the HTML and see what's happening then report back what you see. [ed. note: eric.swd last edited this post 10 years, 9 months ago.]
        MODX...the Zen of CMS
        "Bight off more than you can chew and keep right on chewing."
      • discuss.answer
        sottwell Reply #3, 10 years, 9 months ago
        You click "update"? Or "insert"? There isn't an "update" button on the insert link popup window, unless there's already a URL set.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 40578
          • 10 Posts
          heather Reply #4, 10 years, 9 months ago
          Sorry - I meant "insert" not "update".

          I have completely uninstalled and removed TinyMCE, cleared the cache folder manually, flushed sessions, cleared browser cache, closed the browser ... and then reinstalled TinyMCE. Still the same problem. I've attached an image show what it looks like.
          And when I look at the HTML - nothing looks odd, for example, here is the HTML of the page I am working with:

          <h3><img class="left" src="assets/sitefiles/images/harperpark-creekfall.jpg" alt="Harper Park - creek" width="250" height="336" />Trail Systems</h3>
<p>Create trails and boardwalks that protect sensitive wetlands, but also allow viewing of native wildlife and plants. These trails will be accessible to persons of all ages and abilities.</p>
<h3>Bird Watching</h3>
<p>Develop a birding checklist to help birders identify local species, sharing our discoveries with others.</p>
<h3>Educational Programs</h3>
<p>Provide resources so families can learn about, and enjoy nature together, developing a life-time of shared interest in the world around them.</p>


          After I try to insert a link for the image, the HTML isn't changed at all. I only get the pop up window showing again like the image I've attached.

          ... After some more playing around with it in different browsers, I've found that it works properly in Firefox but the problem occurs in Chrome and Safari.
          • sottwell Reply #5, 10 years, 9 months ago
            Any javascript errors in your browser's error console?
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 40578
              • 10 Posts
              heather Reply #6, 10 years, 9 months ago
              Turns out there is. Here is the error message:

              TypeError: 'null' is not an object (evaluating 'elm.childNodes')
              in file: /assets/components/tinymce/jscripts/tiny_mce/plugins/modxlink/js/modxlink.js
              line 424

              This is the section of code that's causing the error:

                  // Don't move caret if selection was image
    if (elm.childNodes.length != 1 || elm.firstChild.nodeName != 'IMG') {
        inst.focus();
        inst.selection.select(elm);
        inst.selection.collapse(0);
        tinyMCEPopup.storeSelection();
    }


              It's the if statement that is on line 424.

              Any ideas to fix this?
              • matdave Reply #7, 10 years, 3 months ago
                Heather, did you ever find anything? I am currently experiencing the same issue.
                  Mat Dave Jones
                • Magnatron [Maarten Wolzak] Reply #8, 9 years, 5 months ago
                  Heather. Matdave, did you ever find anything? I am running into the exact same problem.
                  • matdave Reply #9, 9 years, 5 months ago
                    Quote from: Magnatron at Oct 27, 2014, 01:56 PM
                    Heather. Matdave, did you ever find anything? I am running into the exact same problem.

                    Magnatron, I found that using Firefox fixed it. Seems to only happen on Chrome, and only when the image is at the *top* of the page.
                      Mat Dave Jones
                      • 49416
                      • 1 Posts
                      dasmart Reply #10, 9 years, 4 months ago
                      So, to whoever will get here from google like me:

                      I was able to find a fix for this issue, but you guys won't like it. The fix is actually inside tinymce repo on github and you just have to transfer it to modx. Follow this steps to get your links work properly on img in webkit browsers:

                      1. Go to tinymce repo and find EditorCommands.js. The version I used is here https://github.com/tinymce/tinymce/blob/7d42a92f11812661a48c8d105c8336824795848e/jscripts/tiny_mce/classes/EditorCommands.js
                      2. We need to use mceInsertLink (somewhere around line 355).
                      3. Now we need to copy/paste it to modx's tinymce and here's the tricky part. The whole library is minified in /assets/components/tinymce/jscripts/tiny_mce/tiny_mce.js so you have to beautify it first (or not if you are super accurate) and replace mceInsertLink's function with one from github.
                      4. Once you've done that go to the script that caused error /assets/components/tinymce/jscripts/tiny_mce/plugins/modxlink/js/modxlink.js and find there inside insertAction().
                      tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#",{
            skip_undo : 1
        });

                      You should change the name of the command to fresh mceInsertLink
                      tinyMCEPopup.execCommand("mceInsertLink", false, "#mce_temp_url#", {
            skip_undo : 1
        });

                      5. Minify your tiny_mce.js again if you want. Placing links should work for you now. I've tested it on both local and production server already.