koha-tmpl/intranet-tmpl/prog/en/includes/wysiwyg-systempreferences.inc

   1 [% USE raw %]
   2 [% USE Asset %]
   3 [% #Enable tinymce for system preferences %]
   4 [% Asset.js("lib/tiny_mce/tiny_mce.js") | $raw %]
   5 <script>
   6
   7 [%# Save TinyMCE content and trigger an event on the original element %]
   8 function wysiwyg_change (ed){
   9     ed.save();
  10     var original_textarea = ed.getElement();
  11     $(original_textarea).trigger("input");
  12 }
  13
  14 tinyMCE.baseURL = "[% interface | html %]/lib/tiny_mce";
  15 tinyMCE.init({
  16     setup : function(ed) {
  17         ed.onInit.add(function(editor){
  18             [%-
  19             #Ideally, it would be nice just to use the "oninput" event, which captures keyboard input, dragging, pasting, etc.
  20             #However, it doesn't work in IE when the event listener is for an element which is "contenteditable". Since TinyMCE
  21             #uses a "contenteditable" body element in an iframe element, it's never going to fire in IE.
  22
  23             #We can get around this a bit by using "onkeyup" and "ondragend".
  24
  25             #"ondragend" occurs after you drag content within the editor. "ondrop" is for when you drag content from outside the
  26             #editor but it doesn't "dirty" the editor, which makes it useless, as the editor won't save unless it's dirty.
  27             #"onpaste" is useless in this same way.
  28
  29             #Reference:
  30             #https://developer.mozilla.org/en-US/docs/Web/Events/input
  31             #https://connect.microsoft.com/IE/feedbackdetail/view/794285
  32             -%]
  33
  34             tinyMCE.dom.Event.bind(editor.getBody(), 'input keyup dragend', function(e){
  35                 wysiwyg_change(ed);
  36             });
  37         });
  38
  39         // Register change when TinyMCE command returns isDirty()
  40         ed.onExecCommand.add(function(ed, cmd, ui, val) {
  41             wysiwyg_change(ed);
  42         });
  43
  44     },
  45     mode : "specific_textareas",
  46     editor_selector : "mce",
  47     theme : "advanced",
  48     content_css : "[% interface | html %]/[% theme | html %]/css/tinymce.css",
  49     plugins : "table,save,advhr,advlink,contextmenu,advimage",
  50     theme_advanced_buttons1 : "bold,italic,|,cut,copy,paste,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,image,link,unlink,anchor,cleanup,help,code,advhr,",
  51     theme_advanced_buttons2 : "tablecontrols,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,removeformat,|,visualaid,|,sub,sup,|,charmap|,forecolor,backcolor",
  52     theme_advanced_buttons3 : "",
  53     theme_advanced_toolbar_location : "top",
  54     theme_advanced_toolbar_align : "left",
  55     theme_advanced_path_location : "bottom",
  56     theme_advanced_resizing : true,
  57     apply_source_formatting : true
  58 });
  59 //]]>
  60 </script>