zoukankan      html  css  js  c++  java
  • Realtime HTML Editor (实时网页编辑器)

    有没有觉得(记事本 + 浏览器)编辑HTML很费劲,给大家推荐一个网页版的HTML编辑器。

    特点:就像IDE一样所编即所得,实时显示效果;重要的是对于javascript脚本也是如此。

    官网:http://htmledit.squarefree.com/

    <!DOCTYPE html>
    <html>
    <head>
    <title>Real-time HTML Editor</title>
    <script type="text/javascript">
    
    var editboxHTML = 
    '<html class="expand close">' +
    '<head>' +
    '<style type="text/css">' +
    '.expand {  100%; height: 100%; }' +
    '.close { border: none; margin: 0px; padding: 0px; }' +
    'html,body { overflow: hidden; }' +
    '<\/style>' +
    '<\/head>' +
    '<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
    '<form class="expand close" name="f">' +
    '<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +
    '<\/textarea>' +
    '<\/form>' +
    '<\/body>' +
    '<\/html>';
    
    var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
    '<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';
    
    // I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
    var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n  Created by <a href="http://www.squarefree.com/" target="_top">Jesse Ruderman<\/a> and hosted by <a href="http://www.dreamhost.com/rewards.cgi?jesseruderman" target="_top">DreamHost<\/a>.\n<\/small><\/div>';
    
    var old = '';
             
    function init()
    {
      window.editbox.document.write(editboxHTML);
      window.editbox.document.close();
      window.editbox.document.f.ta.value = defaultStuff;
      update();
    }
    
    function update()
    {
      var textarea = window.editbox.document.f.ta;
      var d = dynamicframe.document; 
    
      if (old != textarea.value) {
        old = textarea.value;
        d.open();
        d.write(old);
        if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
          d.write(extraStuff);
        d.close();
      }
    
      window.setTimeout(update, 150);
    }
    
    </script>
    </head>
    
    <frameset resizable="yes" rows="50%,*" onload="init();">
      <!-- about:blank confuses opera, so use javascript: URLs instead -->
      <frame name="editbox" src="javascript:'';">
      <frame name="dynamicframe" src="javascript:'';">
    </frameset>
    
    </html>
  • 相关阅读:
    统计SQL
    记一次惨痛教训
    window ssh 连接 本地虚拟机ubuntu 16
    js undefined 笔记
    java new java.text.SimpleDateFormat("yyyyMM01").format(date)
    java 反射
    mapinfo使用
    EnableAutoConfiguration注解说明
    Eureka Server 代码分析01
    BigDecimal 学习比较
  • 原文地址:https://www.cnblogs.com/liubaocheng999/p/2816723.html
Copyright © 2011-2022 走看看