Question

实际上，我正在构建一个非常基本的网站构建器，它使用页面上的表单来操作页面的HTML，显示在输入框下方，最终用户可以获得放入自己网站的来源。我还没有构建它，但我想我需要多个模板，以防有人试图同时编辑同一个模板，并且其他人使用该程序覆盖了他们的编辑。这是一个休闲的模型：

Html显示在输入下方：

<h1 class="heading">Hi guys!</hi>

表单模型：

<input id="headingEdit">
<script>
document.getElementById("heading").innerHTML = document.getElementById("headingEdit").value;
</script>

我的问题是可能相关或不相关的问题，那就是有人想要编辑此模板，当其他人也在编辑它时，那么html肯定会被彼此覆盖，并且没有 - 一个人会到达任何地方。我想要做的是，当用户点击主页上的“编辑此模板”按钮时，他们将被带到一个随机生成的页面，该页面与母版页完全相同，进行编辑，然后删除该页面，或者（当我添加集成时）存储在用户帐户中。

这可能是一个重复的问题，但到目前为止我的研究还没有得出答案。

提前致谢。

Answer 1

您可以使用AngularJS

http://www.w3schools.com/angular/default.asp

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>

Answer 2

这是一个简短的PHP解决方案

$pageid = uniqid();
copy('template.html', $pageid . '.html');

print "Editable page is at: " .$pageid . ".html";

在template.html：

中添加此内容

<?php
    if (str_replace(' ', '', preg_replace('/\.html/', '', basename($_SERVER['PHP_SELF']))) !== 'template') {
        print "<script>
var elems = document.getElementsByTagName('*'),
    i;
for (i = 0; i < elems.length; i += 1) {
elems[i].setAttribute('contentEditable', 'true');
}

window.onbeforeunload = function(){ 
    var a = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
        a.onreadystatechange = function (b) { 
            if(a.readyState==4&&a.status==200){
            } 
        }

       xmlhttp.open('POST','remove_template.php',true);
       xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
       xmlhttp.send('id=" . str_replace(' ', '', preg_replace('/\.html/', '', basename($_SERVER['PHP_SELF']))) . "');
} 

//Custom JavaScript goes here
</script>";
    }
?>

然后remove_template.php是：

if ($_POST['id'] != 'template' && ctype_alnum($_POST['id'])) {
    unset($_POST['id']);
}

您显然应该根据需要更改网址，remove_template.php 有点不安全。我还没有测试过这个。如果您添加了用户系统。将$pageid链接设为其用户帐户。然后只需传递if即可添加window.onbreforeunload

Answer 3

如果您不支持PHP，则可以使用icky JavaScript解决方案

window.editPage () { document.body.contentEditable='true'; document.designMode='on'; }

window.savePage () { localStorage.setItem('savedPage', document.body.innerHTML); }

window.getPage () { document.body.innerHTML = localStorage.getItem('savedPage'); }

然后您可以将该功能添加到onclick属性

<div onclick="window.editPage()">Edit Page</div>

<小时/> 我发现了一些名为Surreal CMS (Content Management System)的东西，可能就是你想要的东西。或者像create.js

这样的东西

使用自动生成的名称制作重复的html文档

3 个答案: