HTML5内联编者-HTML教程-爱易网页

HTML5内联编者

日期：2014-05-17　浏览次数：20986 次

HTML5内联编辑

下面的例子展示了使用div的内联编辑模式。

<html>
  <head>
    <title>
      Editable &lt;div&gt; Element
    </title>

    <script type="text/javascript">
      function showSource() 
      {
        var content = document.getElementById
          ("div").innerHTML;
        content.replace(/</g,'&lt;');
        content.replace(/>/g, '&gt;');
        alert(content);
      }
  
      function createLink() 
      {
        var url = prompt("Enter URL:", "http://");
        if (url)
          document.execCommand("createlink",  false, url);
      }
    </script>
  </head>

  <body>
    <h1>Editable &lt;div&gt; Element</h1>
    <div> 
      <input type="button" value="Bold"   onclick="document.execCommand('bold', false,   null);"> 
      <input type="button" value="Italic"   onclick="document.execCommand  ('italic', false, null);"> 
      <input type="button" value="Underline" 
        onclick="document.execCommand('underline',    false, null);"> 
      <input type="button" value="Add Link"   onclick="createLink();"> 
      <input type="button"  value="Display Source"  onclick="showSource();"> 
    </div> 
    <br>
    <div id="div" style='border:solid   black; height: 300px; width: 400px'  contenteditable="true">
    </div> 

  </body>
</html>

源码下载：

EditDiv.zip