zotero/resource/tinymce/note.html
2017-08-16 00:41:38 +02:00

186 lines
4.9 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/note-ui.css"/>
<script type="text/javascript" src="tinymce.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript">
tinymce.init({
body_id: "zotero-tinymce-note",
content_css: "css/note-content.css",
browser_spellcheck: true,
convert_urls: false,
entity_encoding: 'raw',
fix_list_elements: true,
paste_retain_style_properties: 'all',
paste_data_images: true,
plugins: "autolink,code,contextmenu,directionality,link,lists,paste,searchreplace,textcolor",
toolbar1: "bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | blockquote link",
toolbar2: "formatselect | alignleft aligncenter alignright | bullist numlist outdent indent | %DIR% | searchreplace",
toolbar_items_size: 'small',
menubar: false,
resize: false,
statusbar: false,
contextmenu: "cut copy paste | link | alignmentmenu | dir | code",
link_context_toolbar: true,
link_assume_external_targets: true,
target_list: false,
setup: function (editor) {
setLocale(editor);
// Add alignment submenu to context menu
editor.addMenuItem(
'alignmentmenu',
{
icon: 'alignleft',
text: 'Alignment',
menu: [
{
icon: 'alignleft',
text: 'Align Left',
onclick: function () {
tinyMCE.execCommand('JustifyLeft');
},
context: 'insert'
},
{
icon: 'aligncenter',
text: 'Align Center',
onclick: function () {
tinyMCE.execCommand('JustifyCenter');
},
context: 'insert'
},
{
icon: 'alignright',
text: 'Align Right',
onclick: function () {
tinyMCE.execCommand('JustifyRight');
},
context: 'insert'
},
{
icon: 'alignjustify',
text: 'Justify',
onclick: function () {
tinyMCE.execCommand('JustifyFull');
},
context: 'insert'
}
]
}
);
// Add alignment split-button menu
//
// https://codepen.io/alangill/pen/oLJAOd
//
// Not currently used, but useful if we need more toolbar space
/*editor.addButton(
'alignmentsplit', {
type: 'splitbutton',
text: '',
icon: 'alignleft',
onclick: function(e) {
tinyMCE.execCommand(this.value);
},
menu: [
{
icon: 'alignleft',
text: 'Align Left',
onclick: function() {
tinyMCE.execCommand('JustifyLeft');
this.parent().parent().icon('alignleft');
this.parent().parent().value = 'JustifyLeft';
}
},
{
icon: 'aligncenter',
text: 'Align Center',
onclick: function() {
tinyMCE.execCommand('JustifyCenter');
this.parent().parent().icon('aligncenter');
this.parent().parent().value = 'JustifyCenter';
}
},
{
icon: 'alignright',
text: 'Align Right',
onclick: function() {
tinyMCE.execCommand('JustifyRight');
this.parent().parent().icon('alignright');
this.parent().parent().value = 'JustifyRight';
}
},
{
icon: 'alignjustify',
text: 'Justify',
onclick: function() {
tinyMCE.execCommand('JustifyFull');
this.parent().parent().icon('alignjustify');
this.parent().parent().value = 'JustifyFull';
}
}
],
onPostRender: function() {
// Select the first item by default
this.value ='JustifyLeft';
}
}
);*/
// Set text direction
var dir = window.location.href.match(/dir=(ltr|rtl)/)[1];
var opDir = dir.split("").reverse().join("");
editor.settings.directionality = dir;
editor.addMenuItem('dir', {
icon: opDir,
// TODO: Show correct label based on current line
text: opDir == 'rtl' ? "Right to left" : "Left to right",
onclick: function () {
editor.execCommand('mceDirection' + opDir.toUpperCase());
},
context: 'insert',
prependToContext: true
});
},
init_instance_callback: function (editor) {
zoteroInit(editor);
['Change', 'KeyDown', 'KeyPress', 'Undo', 'Redo'].forEach(eventName =>
editor.on(eventName, event => zoteroHandleEvent(event))
);
["Cut", "Copy", "Paste"].forEach(function (command) {
let cmd = command;
editor.addCommand(command, function (ui, value) {
zoteroExecCommand(editor.getDoc(), cmd, ui, value);
});
});
["ZoteroLinkClick"].forEach(function (command) {
editor.addCommand(command, function (ui, value) {
zoteroHandleEvent({
type: command,
value
});
});
});
}
});
tinymce.execCommand("mceAddEditor", true, "tinymce");
</script>
</head>
<body>
<div id="tinymce"></div>
</body>
</html>