Demo!

Question

我正在尝试创建类似于Squarespace和Wix等网站的网站构建器，它们允许用户通过自定义“WYSIWYG”（如网站构建器）构建动态网站。它们允许用户编辑文本，添加HTML元素等等而无需编写代码。

我在代码中遇到了冲突，因为我需要在编辑器中运行的脚本与实际页面本身的脚本冲突。（下图中突出显示的区域是我在Squarespace上讨论的编辑器，页面的其余部分是HTML的渲染）。冲突包括jQuery版本，css名称，javascript函数命名冲突等等。因为用户可以添加自己的css / javascript。我需要一些帮助，如何避免这种情况并呈现页面的准确“预览”。

任何提示，图书馆建议或有关建立此类内容的信息也将受到赞赏。

enter image description here

Answer 1

之前的方式是使用iframe，JS和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链接到target.html：

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

我使用jQuery库来编辑元素，它不是非常必要，只是更容易：

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

这应该运作良好，唯一的问题是正在编辑的页面必须绝对地链接到其所有资源（http://example.com/assets/mainstyle.css）
整个代码应如下所示：

<?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>

这是非常的基本示例，但希望它可以让您走上正确的轨道。

Demo!

Answer 2

这是一个非常有问题的问题。我将尝试将其分解为您真正需要研究的主题。在准备过程中，了解您需要计划哪些需要团队的层次非常重要：

Serverside安全和代码：记住你可以输入或更改很多东西，除非妥善规划，否则会造成巨大的漏洞。
与CSS的任何冲突都意味着您有重叠的文件。 Javascript / jquery也是如此。另外还有其他任何代码。解决方案：

了解网站上用户能够操作和更改的特定点，并且您有必须与自己的代码隔离的范围（页面/代码区域）。

CSS：如果您使用了许多开源库，这些冲突通常必须手动处理，这是一个艰难的过程。

JS：您可以为特定的代码行包含多个文件和用户的每个单独版本，可在此处找到：Can I use multiple versions of jQuery on the same page?

您的其余代码和插件必须妥善整理。

简单来说：它就像把乐高放在一起，但这些积木并不总是设计成适合的，你必须这样做。

再次，只是预警：这是一项艰巨的任务。

祝你好运！

创建网站构建器具有脚本/ css冲突。

2 个答案:

Demo!