index.html

   1:<html>
   2:<head>
   3:  <title>Html Css Editor Demo</title>
   4:  <script type="text/javascript" src="csseditor/javascript/css.js"></script>
   5:  <script type="text/javascript" src="editor.js"></script>
   6:  <link rel="stylesheet" href="csseditor/style/css.css" type="text/css" />
   7:  <link rel="stylesheet" href="editor.css" type="text/css" />
   8:</head>
   9:<body onLoad="insertEditor(css)">
  10:  <h4>
  11:    Css editor Demo
  12:  </h4>
  13:
  14:  <a href="html.html">See HTML source</a> - <a href="js.html">See Javascript source</a>   
  15:  
  16:  <p>
  17:    Add HTML elements by pushing the buttons below. Then use the elements chooser 
  18:    combobox to choose the element whos style you want to edit. Now, use the css 
  19:    editor to the left to edit the element's style.
  20:  </p>
  21:
  22:  <table>
  23:    <tr class="top">
  24:    
  25:      <!-- placeholder for the css editor -->
  26:      <td id="css" class="editor">Loading the css editor...</td>
  27:      
  28:      <!-- the html editor -->
  29:      <td>
  30:        <form action="">
  31:          <table>
  32:            <tr>
  33:            
  34:              <!-- element panel -->
  35:              <td>
  36:                <button onClick="add('h1')">H1</button>
  37:                <button onClick="add('h2')">H2</button>
  38:                <button onClick="add('h3')">H3</button>
  39:                <button onClick="add('h4')">H4</button>
  40:                <button onClick="add('h5')">H5</button>
  41:                <button onClick="add('h6')">H6</button>
  42:                <button onClick="add('h7')">H7</button>
  43:                <button onClick="add('button')">Button</button>
  44:                <button onClick="add('div')">Div</button>
  45:                <button onClick="add('span')">Span</button>
  46:              </td>
  47:            </tr>
  48:            <tr>
  49:            
  50:              <!-- Element chooser -->
  51:              <td>
  52:                Element chooser:
  53:                <select id="els" onChange="clearStyle()"></select>
  54:              </td>
  55:            </tr>
  56:            <tr>
  57:            
  58:              <!-- the editor itself -->
  59:              <td>
  60:                <div class="htmleditor" id="ed"></div>
  61:              </td>
  62:            </tr>
  63:    
  64:          </table>      
  65:        </form>
  66:      </td>
  67:    </tr>
  68:  </table>
  69:
  70:</body>
  71:</html>