Permalink
Browse files

CodeMirror integration

  • Loading branch information...
1 parent 336af59 commit 27872ea2c164a00dd13323174cea9b4eb4d8c346 @simonewebdesign committed Feb 11, 2013
Showing with 2 additions and 3 deletions.
  1. +1 −1 _template_form.php
  2. +1 −2 style.css
View
@@ -1 +1 @@
-<form method=POST> <fieldset> <legend><?=TEMPLATES?></legend> <p> <label for="id">ID</label> <input id="id" name="id" type="text" value="<?=isset($t->id) ? $t->id : NOT_SET?>" disabled> </p> <p> <label for="name"><?=NAME?></label> <input id="name" name="name" type="text" value="<?=isset($t->name) ? $t->name : ''?>" required> </p> <p> <label for="body"><?=BODY?></label> <textarea id="body" name="body" type="text"><?=isset($t->body) ? $t->body : ''?></textarea> </p> <p> <input id="submit" name="submit" type="submit" value="<?=CREATE_TEMPLATE?>"> </p> </fieldset></form>
+<script src=CodeMirror/lib/codemirror.js></script><script src=CodeMirror/mode/xml/xml.js></script><script src=CodeMirror/mode/javascript/javascript.js></script><script src=CodeMirror/mode/css/css.js></script><script src=CodeMirror/mode/htmlmixed/htmlmixed.js></script><link rel=stylesheet href=CodeMirror/lib/codemirror.css><link rel=stylesheet href=CodeMirror/doc/docs.css><style> iframe { width: 800px; height: 600px; border: 1px solid #ddd; } .codeMirror { width:49%; }</style><form method=POST> <fieldset> <p> <label for="id">ID</label> <input id="id" name="id" type="text" value="<?=isset($t->id) ? $t->id : NOT_SET?>" disabled> </p> <p> <label for="name"><?=NAME?></label> <input id="name" name="name" type="text" value="<?=isset($t->name) ? $t->name : ''?>" required placeholder="Nome del template"> </p> <p> <label for="body"><?=BODY?></label> <?php $default_template_body = '<!doctype html><html lang="it"><head> <meta charset="UTF-8"> <title>My Newsletter</title> <style> body { background: #eef; font-family: Arial, sans-serif; font-size:24px; } h1 { color: #448; } </style></head><body> <h1>My Newsletter</h1> <p>This is just a <em>paragraph</em>.</p> <img src="assets/images/header.jpg" alt="My Logo" /></body></html>'; ?> <textarea id="body" name="body" type="text"><?=isset($t->body) ? $t->body : $default_template_body?></textarea> </p> <p> <input id="submit" name="submit" type="submit" value="<?=(isset($_GET['id'])) ? UPDATE_TEMPLATE : CREATE_TEMPLATE ?>"> </p> </fieldset></form><h2>Anteprima</h2><iframe id="preview"></iframe> <script> var delay; // Initialize CodeMirror editor with the content of the textarea#body. var editor = CodeMirror.fromTextArea(document.getElementById('body'), { mode: 'text/html', tabMode: 'indent' }); editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 300); }); function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 300);</script><h3>Note</h3><p>All'interno del template e' possibile usare dei <em>placeholder</em>, che verranno poi valorizzati nella fase finale di rendering. Ecco l'elenco completo:</p><dl> <dt>:from</dt> <dd>Email del mittente.</dd> <dt>:site_name</dt> <dd>Nome del sito.</dd> <dt>:logo</dt> <dd>Path assoluto del logo.</dd> <dt>:address</dt> <dd>Indirizzo geografico della propria azienda.</dd> <dt>:reply_to</dt> <dd>Email a cui rispondere.</dd> <dt>:site_url</dt> <dd>Path relativo al sito.</dd> <dt>:site_full_url</dt> <dd>Path assoluto al sito.</dd> <dt>:unsubscribe_url</dt> <dd>URL per cancellare l'iscrizione alla newsletter.</dd> <dt>:creatuon_date</dt> <dd>Data di creazione della newsletter.</dd> <dt>:online_version_url</dt> <dd>URL alla versione online della newsletter.</dd> <dt>:root</dt> <dd>La root di questa applicazione.</dd> <dt>:image_path</dt> <dd>Path relativo all'immagine allegata alla newsletter.</dd> <dt>:user_id</dt> <dd>ID univoco dell'utente che aprira' la newsletter.</dd> <dt>:newsletter_id</dt> <dd>ID univoco di questa newsletter.</dd> </dl>
View
@@ -6,14 +6,13 @@ body {
fieldset {
border:none;
- margin-bottom:100px;
}
input, select, textarea {
padding:6px 12px;
}
-input, textarea {
+input, textarea, .CodeMirror {
background:#eee;
border:1px solid #ccc;
}

0 comments on commit 27872ea

Please sign in to comment.