TinyMCE 2.1.0 : /examples/example

[Sommaire] [Imprimer]
   1  <html xmlns="http://www.w3.org/1999/xhtml">
   2  <head>
   3  <title>Template plugin example</title>
   4  <!-- TinyMCE -->
   5  <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce_dev.js"></script>
   6  <script language="javascript" type="text/javascript">
   7      function exampleTemplateFunction(elm) {
   8          elm.innerHTML = prompt("Please enter your favourite colour.", "Color");
   9      }
  10  
  11      var Invoice = {
  12          calculate : function(table) {
  13              var _n = function(s) {
  14                  var n = parseFloat(s.replace(/[^-\d\.]/g,''));
  15                  return isNaN(n) ? 0 : n;
  16              }
  17  
  18              var total = 0;
  19              var r = table.tBodies[0].rows;
  20  
  21              for(var x = 0; x < r.length; x++) {
  22                  var c = r[x].cells;
  23                  var t = _n(c[1].innerHTML)*_n(c[2].innerHTML);
  24                  total += t;
  25                  c[3].innerHTML = '$' + t; 
  26              }
  27  
  28              table.tFoot.rows[0].cells[1].innerHTML = '$' + total;
  29          }
  30      }
  31  
  32      var WordCount = {
  33          getText : function() {
  34              var inst = tinyMCE.selectedInstance;
  35              var na = [];
  36              tinyMCE.getNodeTree(inst.getBody(), na, 3);
  37              for(var x = 0; x < na.length; x++) {
  38                  if(na[x].nodeValue && na[x].nodeValue.length > 3) {
  39                      na[x] = na[x].nodeValue;
  40                  } else {
  41                      na[x] = '';
  42                  }
  43              }
  44              return na.join('');
  45          },
  46  
  47          count : function(elm) {
  48              var s = WordCount.getText();
  49              elm.innerHTML = '' + s.split(' ').length;
  50          },
  51  
  52          charCount : function(elm) {
  53              var s = WordCount.getText();
  54              elm.innerHTML = '' + s.length;
  55          }
  56      }
  57  
  58      tinyMCE.init({
  59          mode : "textareas",
  60          theme : "advanced",
  61          plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
  62          theme_advanced_buttons1_add_before : "save,newdocument,separator",
  63          theme_advanced_buttons1_add : "fontselect,fontsizeselect",
  64          theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor,advsearchreplace",
  65          theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
  66          theme_advanced_buttons3_add_before : "tablecontrols,separator",
  67          theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
  68          theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking,|,template,|,code",
  69          theme_advanced_toolbar_location : "top",
  70          theme_advanced_toolbar_align : "left",
  71          theme_advanced_path_location : "bottom",
  72          content_css : "example_full.css",
  73          plugin_insertdate_dateFormat : "%Y-%m-%d",
  74          plugin_insertdate_timeFormat : "%H:%M:%S",
  75          extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style|title|tsrc],*[mcetmpldtesrc]",
  76          external_link_list_url : "example_link_list.js",
  77          external_image_list_url : "example_image_list.js",
  78          flash_external_list_url : "example_flash_list.js",
  79          media_external_list_url : "example_media_list.js",
  80          file_browser_callback : "fileBrowserCallBack",
  81          theme_advanced_resize_horizontal : false,
  82          theme_advanced_resizing : true,
  83          nonbreaking_force_tab : true,
  84          apply_source_formatting : true,
  85          template_cdate_classes : "cdate creationdate",
  86          template_mdate_classes : "mdate somedate",
  87          template_selected_content_classes : "selcontent",
  88          template_cdate_format : "%m/%d/%Y : %H:%M:%S",
  89          template_mdate_format : "%m/%d/%Y : %H:%M:%S",
  90          template_replace_values : {
  91              username : "Andrew Tetlaw",
  92              "invoice-items" : Invoice.calculate,
  93              "word-count" : WordCount.count,
  94              "char-count" : WordCount.charCount
  95          },
  96          template_templates : [
  97              {
  98                  title : 'Editing Details',
  99                  src : 'templates/editing_details.htm',
 100                  description : "Timestamps, editor's name and a comment area"
 101              },
 102              {
 103                  title : 'Invoice Template',
 104                  src : 'templates/invoice.htm',
 105                  description : 'Fill in the rows and the totals are calculated automatically'
 106              },
 107              {
 108                  title : 'Word Count',
 109                  src : 'templates/count.htm',
 110                  description : 'Word count for editor content'
 111              },
 112              {
 113                  title : 'Editors Comment',
 114                  src : 'templates/editors_comment.htm',
 115                  description : 'Add a comment about the selected text'
 116              }
 117          ]
 118      });
 119      
 120  
 121  </script>
 122  <!-- /TinyMCE -->
 123  </head>
 124  <body>
 125  
 126  <a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a>  <a href="example_word.htm">[Word example]</a>
 127  <form method="get" action="">
 128      <h3>Template example</h3>
 129      This example shows how to make more advanced templates that execute logic.<br /><br />
 130      <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
 131          &lt;span class=&quot;example1&quot;&gt;Test header 1&lt;/span&gt;&lt;br /&gt;
 132          &lt;span class=&quot;example2&quot;&gt;Test header 2&lt;/span&gt;&lt;br /&gt;
 133          &lt;span class=&quot;example3&quot;&gt;Test header 3&lt;/span&gt;&lt;br /&gt;
 134          Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
 135          &lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
 136          &lt;img src=&quot;logo.jpg&quot;&gt;
 137      </textarea>
 138      <br />
 139      <input type="submit" name="save" value="Submit" />
 140      <input type="reset" name="reset" value="Reset" />
 141  </form>
 142  
 143  </body>
 144  </html>
 145
Code source de TinyMCE 2.1.0

/examples/ -> example_template.htm (source)
