koha-tmpl/intranet-tmpl/prog/en/js/tinymce/examples/example_advanced.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns="http://www.w3.org/1999/xhtml">\r
   3 <head>\r
   4 <title>Advanced example</title>\r
   5 <!-- tinyMCE -->\r
   6 <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>\r
   7 <script language="javascript" type="text/javascript">\r
   8         tinyMCE.init({\r
   9                 theme : "advanced",\r
  10                 mode : "exact",\r
  11                 elements : "elm1,elm2",\r
  12                 save_callback : "customSave",\r
  13                 content_css : "example_advanced.css",\r
  14                 extended_valid_elements : "a[href|target|name]",\r
  15                 plugins : "table",\r
  16                 theme_advanced_buttons3_add_before : "tablecontrols,separator",\r
  17                 //invalid_elements : "a",\r
  18                 theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes\r
  19                 //execcommand_callback : "myCustomExecCommandHandler",\r
  20                 debug : false\r
  21         });\r
  22 \r
  23         // Custom event handler\r
  24         function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {\r
  25                 var linkElm, imageElm, inst;\r
  26 \r
  27                 switch (command) {\r
  28                         case "mceLink":\r
  29                                 inst = tinyMCE.getInstanceById(editor_id);\r
  30                                 linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");\r
  31 \r
  32                                 if (linkElm)\r
  33                                         alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));\r
  34                                 else\r
  35                                         alert("Link dialog has been overriden.");\r
  36 \r
  37                                 return true;\r
  38 \r
  39                         case "mceImage":\r
  40                                 inst = tinyMCE.getInstanceById(editor_id);\r
  41                                 imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");\r
  42 \r
  43                                 if (imageElm)\r
  44                                         alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));\r
  45                                 else\r
  46                                         alert("Image dialog has been overriden.");\r
  47 \r
  48                                 return true;\r
  49                 }\r
  50 \r
  51                 return false; // Pass to next handler in chain\r
  52         }\r
  53 \r
  54         // Custom save callback, gets called when the contents is to be submitted\r
  55         function customSave(id, content) {\r
  56                 alert(id + "=" + content);\r
  57         }\r
  58 </script>\r
  59 <!-- /tinyMCE -->\r
  60 \r
  61 </head>\r
  62 <body>\r
  63 \r
  64 <a href="example_full.htm">[Full featured example]</a> [Advanced example] <a href="example_simple.htm">[Simple example]</a> <a href="example_word.htm">[Word example]</a>\r
  65 \r
  66 <h3>Advanced example</h3>\r
  67 This page shows a more complex usage of TinyMCE. On this page the mode is set to convert specific elements in this case a DIV element and a TEXTAREA into editor instances. The example below uses a custom CSS, thats why the text is red and it allso uses the &quot;advanced&quot; theme that includes more options than the default one. The code allso includes examples of custom call back functions and much more. Notice the submit button at the end of the page, this button triggers a save action. Read more about the features and possible settings of TinyMCE in the <a href="../docs/index.html">manual</a>.<br />\r
  68 <br />\r
  69 \r
  70 <!-- Form with textare element with width: 100% -->\r
  71 <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">\r
  72 <textarea name="elm1" style="width:100%" rows="15">\r
  73         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.\r
  74         &lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;\r
  75         &lt;img src=&quot;logo.jpg&quot;&gt;\r
  76 </textarea>\r
  77 <br />\r
  78 <input type="button" name="save" value="save" onclick="tinyMCE.triggerSave();" />\r
  79 </form>\r
  80 \r
  81 <!-- Div elements that gets to be a editor instance aswell -->\r
  82 <div id="elm2" style="width:450px; height:250px">\r
  83         Some <b>element</b>, this is to be editor 2. <br /> This editor instance is a DIV element instead of a textarea.\r
  84         <p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>\r
  85         <img src="logo.jpg" />\r
  86 </div>\r
  87 \r
  88 <br />\r
  89 \r
  90 Some custom actions:\r
  91 <a href="javascript:tinyMCE.execCommand('Bold');">[Bold]</a> | \r
  92 <a href="javascript:tinyMCE.execCommand('Italic');">[Italic]</a>\r
  93 <a href="javascript:void(0);" onclick="tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert some HTML]</a>\r
  94 <a href="javascript:void(0);" onclick="tinyMCE.execCommand('mceReplaceContent',false,'<!-- comment --><b>{$selection}</b>');">[Replace selection]</a>\r
  95 \r
  96 <br />\r
  97 \r
  98 </body>\r
  99 </html>\r