b0c1a9a613
(Even if it's generally a bad idea without hyphenation) Also adds unused code that could replace the three alignment buttons in the toolbar with a split-button menu with all four options. We could use this if we needed more space and didn't think people would mind the extra click when switching between left and center.
186 lines
4.9 KiB
HTML
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: "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>
|