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