Creating a Website Builder has script/css conflicts.

Question

I'm trying to create a website builder similar to sites like Squarespace and Wix have where they allow users to build dynamic websites through a custom "WYSIWYG" like website builder. They allow users to edit text, add HTML elements, and much more without writing code.

I'm having conflicts within the code as the scripts that I need to run in my editor are conflicting with the scripts on the actual page itself. (Highlighted area in picture below is the editor I'm talking about on Squarespace, rest of the page is the rendering of the HTML). Conflicts include jQuery versions, css names, javascript function naming conflicts, etc.. as the user can add their own css/javascript. I need some help on how to go about avoiding this and rendering an accurate "preview" of the page.

Any hints, library suggestions or info on going about building something like this would also be appreciated.

enter image description here

is the code that's being created (i.e. the webpage your building inside your application) inside its own iframe? that's how I'd approach it. inject the required scripts/css/html from outside of the frame keeping both contexts separate — atmd, Mar 19 '15 at 14:52
I have made a Drag 'n Drop builder before, so my clients can edit their websites, and an iframe really is the way to go. — Jacob G, Mar 19 '15 at 14:56
I didn't start using an iframe purely because I didn't think that the editor in the current window would have access to the elements within the frame. Is that possible to have elements editable in an iframe from a current window? — FAtBalloon, Mar 19 '15 at 15:13
You are correct, cross domain JS is not allowed, the way i did it was get the page i wanted to edit's source with PHP, then load the source into an iframe — Jacob G, Mar 19 '15 at 15:16
How do I then have a script that allows a user to select elements on the page in the iframe? The user will need to be able to click on a piece of text on the iframe page and edit it, that sort of thing. — FAtBalloon, Mar 19 '15 at 15:19

Jacob G · Answer 1 · 2015-03-19T15:53:14.230

The way I did it before, was using iframes, JS, and PHP.
First, because of Cross-domain rules, I got the source of the file I want to edit:

$targetpage = file_get_contents("http://example.com");
$targetname = 'target.html';
$targetmaker = fopen($targetname, 'w') or die('Cannot open file:  '.$targetname);
fwrite($targetmaker, $targetpage);

Then I linked to target.html with the iframe:

<iframe id="viewpane" name="viewpane" src="target.html"></iframe>

I used the jQuery library to edit the elements, it isn't really necessary, just easier:

$(function(){
    $("#viewpane").contents().find('*').click(function(){
    $(this).attr('contenteditable','true');
    });
});

That should work good, the one problem is the page being edited must link to all its resources with absolutely(http://example.com/assets/mainstyle.css)
The whole code should look like this:

<?php
$targetpage = file_get_contents("http://example.com");
        $targetname = 'target.html';
        $targetmaker = fopen($targetname, 'w') or die('Cannot open file:  '.$targetname);
        fwrite($targetmaker, $targetpage);
?>
<iframe id="viewpane" name="viewpane" src="target.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $("#viewpane").contents().find('*').click(function(){
    $(this).attr('contenteditable','true');
});
});
</script>

This is a very basic example, but hopefully it gets you on the right track.

Demo!

Thanks Jacob, really appreciate it. However, there is one nuance. So I need to have styles defined within the page editor render on the iframe. As you can see with this example, the style doesn't render within the Iframe.
Test — FAtBalloon, Mar 19 '15 at 16:52
@GeorgeMcDowd Sorry, didn't see that comment. You can add it into the head manually, or with jQuery like: `$("#viewpane").contents().find('head').append("");` — Jacob G, Apr 13 '15 at 17:17

score 0 · Answer 2 · edited May 23 '17 at 12:13

This is a very loaded question. I will try to break it down into topics you really have to look into. In preparation it is important to understand the layers you're going to have to plan which will require a team:

Serverside security and code: remember you can input or change many things, which will create a huge vulnerability unless properly planned.
Any conflicts with CSS means that you have files that overlap. Javascript/jquery as well. In addition any other code. Solution:

Look into segragating particular points on the website that the user is able to manipulate and change and you have the scope (the area on page/code) which you will have to segregate from your own code.

CSS: These conflicts usually have to be handled manually if you're using many open source libraries, this is a tough one.

JS: You can include multiple files and user each separate version for specific lines of code, this can be found here: Can I use multiple versions of jQuery on the same page?

The rest of your code and plugins have to be well put together.

To put it in simple terms: it's like putting Lego together but the blocks aren't always designed to fit together, you have to make it so.

Again, just a forewarning: this is a big undertaking.

Good Luck!

"Make it so." - Capt. Jean-Luc Picard – Mr. Polywhirl Mar 19 '15 at 15:18 — Mr. Polywhirl, Mar 19 '15 at 15:18

Creating a Website Builder has script/css conflicts.

2 Answers2

Demo!