note.html (5062B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <link type="text/css" rel="stylesheet" href="css/note-ui.css"/> 6 <script type="text/javascript" src="tinymce.min.js"></script> 7 <script type="text/javascript" src="locale.js"></script> 8 <script type="text/javascript"> 9 tinymce.init({ 10 body_id: "zotero-tinymce-note", 11 content_css: "css/note-content.css", 12 13 browser_spellcheck: true, 14 convert_urls: false, 15 entity_encoding: 'raw', 16 fix_list_elements: true, 17 paste_retain_style_properties: 'all', 18 paste_data_images: true, 19 20 plugins: "autolink,code,contextmenu,directionality,link,lists,paste,searchreplace,textcolor", 21 22 toolbar1: "bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | blockquote link", 23 toolbar2: "formatselect | alignleft aligncenter alignright | bullist numlist outdent indent | %DIR% | searchreplace", 24 toolbar_items_size: 'small', 25 menubar: false, 26 resize: false, 27 statusbar: false, 28 29 contextmenu: "cut copy paste | link | alignmentmenu | dir | code", 30 31 link_context_toolbar: true, 32 link_assume_external_targets: true, 33 34 target_list: false, 35 36 setup: function (editor) { 37 setLocale(editor); 38 39 // Add alignment submenu to context menu 40 editor.addMenuItem( 41 'alignmentmenu', 42 { 43 icon: 'alignleft', 44 text: 'Alignment', 45 menu: [ 46 { 47 icon: 'alignleft', 48 text: 'Align Left', 49 onclick: function () { 50 tinyMCE.execCommand('JustifyLeft'); 51 }, 52 context: 'insert' 53 }, 54 { 55 icon: 'aligncenter', 56 text: 'Align Center', 57 onclick: function () { 58 tinyMCE.execCommand('JustifyCenter'); 59 }, 60 context: 'insert' 61 }, 62 { 63 icon: 'alignright', 64 text: 'Align Right', 65 onclick: function () { 66 tinyMCE.execCommand('JustifyRight'); 67 }, 68 context: 'insert' 69 }, 70 { 71 icon: 'alignjustify', 72 text: 'Justify', 73 onclick: function () { 74 tinyMCE.execCommand('JustifyFull'); 75 }, 76 context: 'insert' 77 } 78 ] 79 } 80 ); 81 82 // Add alignment split-button menu 83 // 84 // https://codepen.io/alangill/pen/oLJAOd 85 // 86 // Not currently used, but useful if we need more toolbar space 87 /*editor.addButton( 88 'alignmentsplit', { 89 type: 'splitbutton', 90 text: '', 91 icon: 'alignleft', 92 onclick: function(e) { 93 tinyMCE.execCommand(this.value); 94 }, 95 menu: [ 96 { 97 icon: 'alignleft', 98 text: 'Align Left', 99 onclick: function() { 100 tinyMCE.execCommand('JustifyLeft'); 101 this.parent().parent().icon('alignleft'); 102 this.parent().parent().value = 'JustifyLeft'; 103 } 104 }, 105 { 106 icon: 'aligncenter', 107 text: 'Align Center', 108 onclick: function() { 109 tinyMCE.execCommand('JustifyCenter'); 110 this.parent().parent().icon('aligncenter'); 111 this.parent().parent().value = 'JustifyCenter'; 112 } 113 }, 114 { 115 icon: 'alignright', 116 text: 'Align Right', 117 onclick: function() { 118 tinyMCE.execCommand('JustifyRight'); 119 this.parent().parent().icon('alignright'); 120 this.parent().parent().value = 'JustifyRight'; 121 } 122 }, 123 { 124 icon: 'alignjustify', 125 text: 'Justify', 126 onclick: function() { 127 tinyMCE.execCommand('JustifyFull'); 128 this.parent().parent().icon('alignjustify'); 129 this.parent().parent().value = 'JustifyFull'; 130 } 131 } 132 ], 133 onPostRender: function() { 134 // Select the first item by default 135 this.value ='JustifyLeft'; 136 } 137 } 138 );*/ 139 140 // Set text direction 141 var dir = window.location.href.match(/dir=(ltr|rtl)/)[1]; 142 var opDir = dir.split("").reverse().join(""); 143 editor.settings.directionality = dir; 144 editor.addMenuItem('dir', { 145 icon: opDir, 146 // TODO: Show correct label based on current line 147 text: opDir == 'rtl' ? "Right to left" : "Left to right", 148 onclick: function () { 149 editor.execCommand('mceDirection' + opDir.toUpperCase()); 150 }, 151 context: 'insert', 152 prependToContext: true 153 }); 154 }, 155 156 init_instance_callback: function (editor) { 157 zoteroInit(editor); 158 159 ['Change', 'KeyDown', 'KeyPress', 'Undo', 'Redo'].forEach(eventName => 160 editor.on(eventName, event => zoteroHandleEvent(event)) 161 ); 162 163 ["Cut", "Copy", "Paste"].forEach(function (command) { 164 let cmd = command; 165 editor.addCommand(command, function (ui, value) { 166 zoteroExecCommand(editor.getDoc(), cmd, ui, value); 167 }); 168 }); 169 170 ["ZoteroLinkClick"].forEach(function (command) { 171 editor.addCommand(command, function (ui, value) { 172 zoteroHandleEvent({ 173 type: command, 174 value 175 }); 176 }); 177 }); 178 } 179 }); 180 tinymce.execCommand("mceAddEditor", true, "tinymce"); 181 </script> 182 </head> 183 <body> 184 <div id="tinymce"></div> 185 </body> 186 </html>