HTML5内联编者

2012-08-24

HTML5内联编辑?下面的例子展示了使用div的内联编辑模式。??htmlheadtitleEditable div Element/ti

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

热点排行

CSS

HTML5内联编者