任何用户如何看待来自不同浏览器的HTML内容可编辑内容

时间:2014-10-08 01:42:04

标签: javascript jquery html5

我想创建一个基于模板的网站(如同weebly),用户可以通过点击它来更改页面上的文字。

我创建了具有该功能的页面。但它只是在编辑器的浏览器上显示为localStorage存储浏览器存储区域的更改。我希望对该页面上的每个访问者都可以看到更改。

这是代码

<html>
  <head>
   <meta charset="UTF-8">
   <title>My Tasks</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <style>
   body{
    background:url(chobi.png);
   }
  </style>
  </head>

<body>
 <h1 id=hi contenteditable=true>My Tasks</h1>
 <p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
 <ul id=myTasks contenteditable=true>
    <li></li>
 </ul>

    <script>
     $(document).ready(function(){
      $("#myTasks").blur(function() {
       localStorage.setItem('myTasData', this.innerHTML);
      });

      if ( localStorage.getItem('myTasData') ) {
        $("#myTasks").html(localStorage.getItem('myTasData')); 
      }

      $("#hi").blur(function() {
       localStorage.setItem('hiData', this.innerHTML);
      });

      if ( localStorage.getItem('hiData') ) {
       $("#hi").html(localStorage.getItem('hiData')); 
      }
    });
   </script>
</body>
</html>

我该怎么做。

1 个答案:

答案 0 :(得分:0)

你应该使用php(服务器端脚本语言)或任何其他类似ASP等或数据库MySQL(存储你的数据)你只能用客户端脚本编写它 :) PhPMYSQL非常简单

你的php将是

<?php

$content = #some cotent from database

echo "<div contenteditable='true'> ". $content."</div>" #now user can easily change the contant loaded from database

?>

并添加一个按钮,然后当用户点击该按钮时,所有更改都将提交 在数据库上然后它可用于任何一个:)