Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to change live page to author editor using browser bookmark?

Avatar

Level 1

I am using looking to have a Javascript for browser bookmark so, the live page URL converts to the Author editor URL with just a click.  That way it saves time digging in the Sites to find the page.

Can anyone help me with this?

Thank you!

1 Accepted Solution

Avatar

Correct answer by
Level 3

@djoshinp What you need in this case is a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) which is a bookmark that runs JavaScript. See the below for an example:

javascript\: (() => {
  let pagePath = window.location.pathname.substring(1);
  pagePath = pagePath.replace(/\/$/, '');

  const anchorElement = document.createElement('a');
  anchorElement.href = `http://localhost:4502/editor.html/${pagePath}.html`;
  anchorElement.target = '_blank';

  anchorElement.click();
})();

Be aware that javascript\: is required to inform the browser that it needs to execute JavaScript in the context of this bookmark. Also note that the backslash in javascript\: is only for escaping purposes here. See the link for examples of the correct formatting.

Here is what this does:

  1. Takes the current page path and removes the initial forward slash
  2. Removes the trailing forward slash
  3. Creates a dummy anchor element that opens the editor page in a new tab/window

There are some assumptions here:

  1. The page path already contains /content
  2. Your author URL is http://localhost:4502

If you need more configuration an extension would be better but that is beyond this forum.

Hope that helps.

View solution in original post

5 Replies

Avatar

Correct answer by
Level 3

@djoshinp What you need in this case is a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) which is a bookmark that runs JavaScript. See the below for an example:

javascript\: (() => {
  let pagePath = window.location.pathname.substring(1);
  pagePath = pagePath.replace(/\/$/, '');

  const anchorElement = document.createElement('a');
  anchorElement.href = `http://localhost:4502/editor.html/${pagePath}.html`;
  anchorElement.target = '_blank';

  anchorElement.click();
})();

Be aware that javascript\: is required to inform the browser that it needs to execute JavaScript in the context of this bookmark. Also note that the backslash in javascript\: is only for escaping purposes here. See the link for examples of the correct formatting.

Here is what this does:

  1. Takes the current page path and removes the initial forward slash
  2. Removes the trailing forward slash
  3. Creates a dummy anchor element that opens the editor page in a new tab/window

There are some assumptions here:

  1. The page path already contains /content
  2. Your author URL is http://localhost:4502

If you need more configuration an extension would be better but that is beyond this forum.

Hope that helps.

Avatar

Employee Advisor

Hi @djoshinp 

 

Not sure if you have already explored chrome plugins, there are a lot, you can explore, but one I do remember is this one https://chrome.google.com/webstore/detail/esri-aem-chrome-extension/olnobjdmmkloilfjcflfpkponphjpchi... ,

it does exactly the same thing that you have mentioned in your use case. 

 

Otherwise, you can refer to the solution provided by @cshawaus.

 

Hope this helps!

 

Regards,

Nitesh

 

Avatar

Level 1

The following instructions are based on Chrome's bookmarking system.  The script provided references a meta tag that contains the content path of the page (e.g.<meta name="aem-content-path" content="/content/mysite/en/mypage">).

 

  1. Click on Bookmarks and then Bookmark Manager in Chrome's main nav menu
  2. Make sure "Bookmark Bar" is highlighted in left nav of the page
  3. Click 3 dots in top right of the page
  4. Click "Add new bookmark".  A bookmark creation form will appear
  5. Define a new name for your bookmark in the Name field
  6. Place the following script (with any necessary changes to match your environment) into the URL field

 

javascript&colon;(function()%7Bvar%20aem_content_path%20%3D%20document.querySelector('meta%5Bname%3D%22aem-content-path%22%5D').content%3Bdocument.location.href%3D'https%3A%2F%2Fstgauthor.yourdomain.com%2Feditor.html'%20%2B%20aem_content_path%20%2B%20'.html'%7D)()