编辑内容可编辑的页面并使用php保存

时间:2016-01-16 10:29:27

标签: javascript php jquery ajax html5

我正试图围绕一个我想继续努力尝试更熟悉PHP编程的项目。

我想创建一个易于更新的网站,而无需完整的CMS。我正在考虑使用 HTML5 contenteditable 小部件。

我想象的是:

  1. 用户登录并启动会话,该会话将允许php回显内容可编辑标记,以便仅在用户通过身份验证时才可见。
  2. 登录后,用户可以更改文件并单击保存按钮,文件将会更新。这就是我需要帮助的地方
  3. 是否可以更新您当前使用的php文件?如果是,它是否涉及ajax或只是纯PHP? 如何传递contenteditable小部件中的内容以保存在服务器上?我不想使用FTP,所以我假设我必须学习如何用AJAX做到这一点?我讨厌问,但如果你有一些很棒的示例代码!

    最后,这是一个超级主要的安全风险吗?

    提前致谢!

    亚特兰特

1 个答案:

答案 0 :(得分:1)

我刚做了类似的事情。考虑到您已经构建了一个具有文本框和提交按钮的<form>

<form action="update.php" method="post">
  <div><label for="textArea">Your Message</label></div>
  <div><textarea name="textArea" id="textArea"></textarea></div>
  <div><input type="submit" value="Save" /></div>
</form>

现在你只需要做一件事。移除<form>并将<textarea>替换为contentEditable <div>,如下所示:

<strong>Your Message</strong>
<div contenteditable id="textArea"></div>
<input type="button" value="Save" id="saveBtn" />

如您所知,上面也充当了富文本编辑器,现在您只需要做一件事。使用jQuery,使用AJAX发布表单并执行某些操作:

$(function () {
  $("#saveBtn").click(function () {
    var text = $("#textArea").html();
    var url = "update.php";
    $.post(url, {textArea: text}, function () {
      $("#textArea").css("background", "#ccc").prop("contenteditable", false);
      alert("Thanks for your message!");
    });
  });
});

要回答有关安全性的问题,您必须拥有完美修补的服务器并使用HTTPS。这只能由服务器端处理。现代浏览器非常安全。