Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
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)()