1

CONTEXT

As part of a Meteor.JS app, I need to create a visual editor that allows the user to do the following:

  1. Type in a URL of a live site (can be any site, no JS snippet required)
  2. See the site in a an iframe/wysiwyg editor within the app
  3. Select text/images within this webpage and change their content visually

On the back end, I need the above actions to be translated into two parts:

  1. A jQuery selector telling me which element has been changed
  2. A value indicating the new text/image url.

PROBLEM

I've found the following WYSIWYG editor which seems to work well for the editing part of this: https://www.froala.com/wysiwyg-editor/docs - However, there are two pieces which I am not sure about:

  1. I can use this plugin if I load it within a site, but I'm not sure how to use it on a third party site (e.g. as Chrome Dev Tools does).
  2. I'm not sure how to translate changes made into jQuery selector and value.

Any insight into either piece of this problem would be greatly appreciated.

Sekoul
  • 1,361
  • 2
  • 14
  • 30
  • 1
    The major issue you have will be getting the source of a third party domain client side. AJAX is out as most sites won't have CORS enabled, and iframe is probably out too as most sites would have `X-Frame-Options` set to `deny`. This leaves you with using a server-side proxy (ie. making a server-side request to the domain specified on the client, and returning back the HTML) – Rory McCrossan Apr 27 '16 at 14:56
  • Thank you for your input! What if I put a JS snippet in the of the target site? I basically need to recreate some of the functioanlity of Chrome Dev Tools... didn't think it would be such a big deal considering I'm not actually trying to change the live site, I just need jQuery selector as output. – Sekoul Apr 27 '16 at 15:54
  • I'm afraid it would make no difference. Security around cross-domain requests is very tight for JS. – Rory McCrossan Apr 28 '16 at 06:51

1 Answers1

0

For anyone with the same question, I've found two ways to solve this problem:

  1. JS Snippet: if there is a JS Snippet in third party site, you can use the postMessage method to communicate with it. More on that here: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  2. No JS Snippet: if there is not JS Snippet in third party site, you can use a proxy to load the site into the iframe. The proxy acts as a middle-man, allowing you to inject code into the site before it is loaded in your iframe. Process is described clearly here: Proxying a site to be able to WYSIWYG edit in iframe - How does it work?
Community
  • 1
  • 1
Sekoul
  • 1,361
  • 2
  • 14
  • 30