Mercurial > eldonilo > barbecue

view index.xhtml @ 2:683f56999fb3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
'DOMNodeFocused' pseudo-event + Mutation Event Demo
author Fabien Cazenave <fabien@cazenave.cc>
date Mon, 19 Dec 2011 18:50:06 +0100
parents eb3679d92996
children 03ef53b969bd
line wrap: on
line source

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <title> barbecue </title>
  <link type="text/css" href="style.css" rel="stylesheet" />
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <form id="toolbar">
    <dl>
      <dt> edit: </dt>
      <dd>
        <input type="button" value=" " data-command="undo" />
        <input type="button" value=" " data-command="redo" />
        |
        <input type="button" value=" " data-command="cut"   disabled="" />
        <input type="button" value=" " data-command="copy"  disabled="" />
        <input type="button" value=" " data-command="paste" disabled="" />
        |
        <input type="checkbox" id="useCSS" data-command="styleWithCSS" checked="" />
        <label for="useCSS">style with CSS</label>
      </dd>
      <dt> inline: </dt>
      <dd>
        <select data-command="fontName">
          <option value="" disabled="" selected=""> Font </option>
          <option value="serif">           serif           </option>
          <option value="sans-serif">      sans-serif      </option>
          <option value="monospace">       monospace       </option>
          <option value=" " disabled="">   -               </option>
          <option value="Arial">           Arial           </option>
          <option value="Courier New">     Courier New     </option>
          <option value="Times New Roman"> Times New Roman </option>
          <option value="Verdana">         Verdana         </option>
        </select>
        <select data-command="fontSize">
          <option value="" disabled="" selected=""> Size </option>
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
          <option value="3"> 3 </option>
          <option value="4"> 4 </option>
          <option value="5"> 5 </option>
          <option value="6"> 6 </option>
          <option value="7"> 7 </option>
        </select>
        <input type="button" value="-" data-command="decreaseFontSize" />
        <input type="button" value="+" data-command="increaseFontSize" />
        |
        <input type="button" value=" " data-command="bold"          />
        <input type="button" value=" " data-command="italic"        />
        <input type="button" value=" " data-command="underline"     />
        <input type="button" value=" " data-command="strikeThrough" />
        |
        <input type="button" value=" " data-command="subscript"   />
        <input type="button" value=" " data-command="superscript" />
      </dd>
      <dt> block: </dt>
      <dd>
        <select data-command="formatBlock">
          <option value="" disabled="" selected=""> Format </option>
          <option value="&lt;p&gt;"> paragraph </option>
          <option value="&lt;h1&gt;"> heading 1 </option>
          <option value="&lt;h2&gt;"> heading 2 </option>
          <option value="&lt;h3&gt;"> heading 3 </option>
          <option value="&lt;h4&gt;"> heading 4 </option>
          <option value="&lt;h5&gt;"> heading 5 </option>
          <option value="&lt;h6&gt;"> heading 6 </option>
          <option value="&lt;address&gt;"> address </option>
          <option value="&lt;pre&gt;"> preformatted </option>
        </select>
        |
        <input type="button" value=" " data-command="justifyLeft"   />
        <input type="button" value=" " data-command="justifyCenter" />
        <input type="button" value=" " data-command="justifyRight"  />
        <input type="button" value=" " data-command="justifyFull"   />
        |
        <input type="button" value=" " data-command="outdent" />
        <input type="button" value=" " data-command="indent"  />
        |
        <input type="button" value=" " data-command="insertOrderedList"   />
        <input type="button" value=" " data-command="insertUnorderedList" />
      </dd>
    </dl>
    <pre id="execCommand" />
  </form>
  <pre id="breadcrumb"> </pre>

  <section contenteditable="true">
    <h2> Go ahead, edit away! </h2>
    <p> Here's a typical paragraph element </p>
    <ol><li> and now a list </li><li> with only      </li><li> three items    </li></ol>
  </section>

  <footer contenteditable="true">
    <p>
      This HTML content editor is not intended to compete with <a
      href="http://ckeditor.com/">CKEditor</a> or <a
      href="http://tinymce.com/">TinyMCE</a>: it is designed to
      <strong>test</strong> the various implementations of
      <code>contentEditable</code> and <code>execCommand</code>
      in modern browsers.
    </p>
    <p>
      This is a standalone file: the JavaScript code (&lt;40 lines!), CSS markup and
      images are embedded. Feel free to download it to try it offline.
    </p>
    <p>
      Useful links:
      <a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla">Mozilla Developer Network</a>,
      <a href="http://html5demos.com/contenteditable/">html5demos.com</a>,
      <a href="http://www.browserscope.org/richtext2/test">Browserscope.org</a>.
    </p>
  </footer>
</body>
</html>