Upgrade StorageHOWTO enable additional TinyMCE (Note editor) functionality
HOWTO enable additional TinyMCE (Note editor) functionality
This documents how to hack the zotero firefox plugin to enable additional functionality in the Notes editor. The editor is a product called TinyMCE, which has been incorporated into Zotero. I'll show how to turn on two functions: search/replace and paste plain text. It should work for other functions built-in to TinyMCE but not implemented by Zotero, with the notable exception of spellcheck (see misc. notes at end).
For a more general introduction to what we're doing here please read Modifying Zotero Files.
WARNING: this is a moderately technical operation and runs the risk of causing harm, destroying data, and as they say in motorcycle manuals, serious injury or DEATH! If you don't understand these instructions you probably shouldn't try this. Also recommended: read through the instructions completely before doing anything.
NOTE: you have to do this every time zotero is updated, a bit of a pain.
In the instructions below, [profile] is the path to the firefox profile directory where you have installed zotero. I run Linux, so the firefox settings are in
I've installed zotero to my default profile, so the profile directory is something like
If you don't know about firefox profiles you probably shouldn't be doing this.
> STEP 1------------------------------------------
Find the zotero.jar file:
Back it up by copying to zotero.jar.unmodified or other name of your choosing.
Unzip the zotero.jar file. (You can do this anywhere but I'll assume you unzipped it right there under the chrome directory.)
In the unpacked code, the TinyMCE code is under this directory
Look at the top of this file
to confirm which version of TinyMCE is being used. At the top of the file you'll see text like this.
Fairly obvious: here zotero is using TinyMCE version 3.2.5
> STEP 2------------------------------------------
Download the full TinyMCE distribution from this url
http://sourceforge.net/projects/tinymce/files/
NOTE this is usually NOT the current, most recent release. Find the precise version (as identified in the previous step - in this example, version 3.2.5) in the list of distributions. You want the normal distro, file name tinymce_[version].zip - not the "dev" or other versions.
Unpack the TinyMCE distro. All the code will be under a directory named tinymce. The javascript files we're interested in are under the directory .../tinymce/jscripts/tiny_mce
> STEP 3------------------------------------------
KEY STEP - copy additional TinyMCE modules into the zotero code that we unpacked from zotero.jar. What we want to do is copy the entire TinyMCE distro into zotero's code *without* overwriting existing code. This is because the TinyMCE code in zotero contains modifications that we must preserve.
In a *nix-like shell use a command in this form
where
assuming you unpacked zotero.jar in your profile directory, [target] will be
* optionally: You can do this with a GUI file manager, as long as you understand conceptually what we're doing. But I won't provide instructions for that.
> STEP 4------------------------------------------
Now you can modify the TinyMCE code to provide more built-in functionality. Here I'll just enable (1) search/replace and (2) paste without formatting.
This requires two modifications to note editor code in the file
first mod: tell TinyMCE which plugins to use. In the tinyMCE.init() method, look for the line
Change this to reference the additional TinyMCE plugins you want to use (docs here). I only need to add the searchreplace plugin so now the line reads
second mod: add buttons to toolbars. In the next few lines you should see lines beginning with
These define the note editor toolbars - basically names of the buttons separated by commas and vertical bars. For more details consult the TinyMCE documentation. To add the "paste plain text" button, insert "pastetext" . To add search and replace buttons, insert "search" and "replace" . The two lines end up like this for me:
In zotero 2.0b7.1 the first mod is to line 34, the second to lines 37 and 38. <-- <b>this may change in future versions
> STEP 5------------------------------------------
Rezip the zotero.jar file. (This can be done with a GUI tool but I won't describe that here.) From the directory where code was unzipped - [profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero - execute the command
There are various ways you can zip it up but the IMPORTANT thing is to check that your jar file has zipped the right part of the directory "tree". If you look inside the jar file, you should see the directories
not e.g. a directory named zotero - that means you zipped files starting from the wrong level of the tree. (Initially I screwed this up and it took a long time to figure out.)
Replace the original zotero.jar with the newly-created one. (If following the above procedure, move up to its parent directory.)
>----STEP 6----------------------------------
Restart firefox and you should have the new features.
Misc. Notes:
* If you have problems, back out your changes by simply restoring the original zotero.jar file and restarting Firefox.
* The paste-as-plaintext is pretty klugy. It pops up a window, you paste into the window, click Insert and the text is pasted in. Better than nothing.
* Unfortunately spellcheck can't be enabled this way. That's a somewhat complex issue, I'll post more about it later.
* Again, you have to do this every time zotero is updated.
* If you have additional information about specific plugins, corrections, or other useful info please post to this thread.
This documents how to hack the zotero firefox plugin to enable additional functionality in the Notes editor. The editor is a product called TinyMCE, which has been incorporated into Zotero. I'll show how to turn on two functions: search/replace and paste plain text. It should work for other functions built-in to TinyMCE but not implemented by Zotero, with the notable exception of spellcheck (see misc. notes at end).
For a more general introduction to what we're doing here please read Modifying Zotero Files.
WARNING: this is a moderately technical operation and runs the risk of causing harm, destroying data, and as they say in motorcycle manuals, serious injury or DEATH! If you don't understand these instructions you probably shouldn't try this. Also recommended: read through the instructions completely before doing anything.
NOTE: you have to do this every time zotero is updated, a bit of a pain.
In the instructions below, [profile] is the path to the firefox profile directory where you have installed zotero. I run Linux, so the firefox settings are in
~/.mozilla/firefox-3.5 I've installed zotero to my default profile, so the profile directory is something like
~/.mozilla/firefox-3.5/ads54fds.default If you don't know about firefox profiles you probably shouldn't be doing this.
> STEP 1------------------------------------------
Find the zotero.jar file:
[profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero.jarBack it up by copying to zotero.jar.unmodified or other name of your choosing.
Unzip the zotero.jar file. (You can do this anywhere but I'll assume you unzipped it right there under the chrome directory.)
In the unpacked code, the TinyMCE code is under this directory
[profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero/content/zotero/tinymceLook at the top of this file
[profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero/content/zotero/tinymce/tiny_mce.jsto confirm which version of TinyMCE is being used. At the top of the file you'll see text like this.
var tinymce = {
majorVersion : '3',
minorVersion : '2.5',
releaseDate : '2009-06-29',
Fairly obvious: here zotero is using TinyMCE version 3.2.5
> STEP 2------------------------------------------
Download the full TinyMCE distribution from this url
http://sourceforge.net/projects/tinymce/files/
NOTE this is usually NOT the current, most recent release. Find the precise version (as identified in the previous step - in this example, version 3.2.5) in the list of distributions. You want the normal distro, file name tinymce_[version].zip - not the "dev" or other versions.
Unpack the TinyMCE distro. All the code will be under a directory named tinymce. The javascript files we're interested in are under the directory .../tinymce/jscripts/tiny_mce
> STEP 3------------------------------------------
KEY STEP - copy additional TinyMCE modules into the zotero code that we unpacked from zotero.jar. What we want to do is copy the entire TinyMCE distro into zotero's code *without* overwriting existing code. This is because the TinyMCE code in zotero contains modifications that we must preserve.
In a *nix-like shell use a command in this form
cp -ru [TinyMCE]/tinymce/jscripts/tiny_mce/* [target] where
[TinyMCE] = directory where you unpacked the TinyMCE distro
[target] = location of TinyMCE code in the unpacked zotero.jar code assuming you unpacked zotero.jar in your profile directory, [target] will be
[profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero/content/zotero/tinymce/ * optionally: You can do this with a GUI file manager, as long as you understand conceptually what we're doing. But I won't provide instructions for that.
> STEP 4------------------------------------------
Now you can modify the TinyMCE code to provide more built-in functionality. Here I'll just enable (1) search/replace and (2) paste without formatting.
This requires two modifications to note editor code in the file
[profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero/content/zotero/tinymce/note.html first mod: tell TinyMCE which plugins to use. In the tinyMCE.init() method, look for the line
plugins : ... Change this to reference the additional TinyMCE plugins you want to use (docs here). I only need to add the searchreplace plugin so now the line reads
plugins : "paste,contextmenu,searchreplace",second mod: add buttons to toolbars. In the next few lines you should see lines beginning with
theme_advanced_buttons1 : ...
theme_advanced_buttons2 : ... These define the note editor toolbars - basically names of the buttons separated by commas and vertical bars. For more details consult the TinyMCE documentation. To add the "paste plain text" button, insert "pastetext" . To add search and replace buttons, insert "search" and "replace" . The two lines end up like this for me:
theme_advanced_buttons1 : "pastetext,|,bold,italic,underline,strikethrough,|,sub,sup,|,forecolor,backcolor,|,blockquote,|,link,unlink",
theme_advanced_buttons2 : "search,replace,|,formatselect,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,outdent,indent,|,removeformat,code",
In zotero 2.0b7.1 the first mod is to line 34, the second to lines 37 and 38. <-- <b>this may change in future versions
> STEP 5------------------------------------------
Rezip the zotero.jar file. (This can be done with a GUI tool but I won't describe that here.) From the directory where code was unzipped - [profile]/extensions/zotero@chnm.gmu.edu/chrome/zotero - execute the command
zip -r0 zotero.jar *There are various ways you can zip it up but the IMPORTANT thing is to check that your jar file has zipped the right part of the directory "tree". If you look inside the jar file, you should see the directories
content
locale
skinnot e.g. a directory named zotero - that means you zipped files starting from the wrong level of the tree. (Initially I screwed this up and it took a long time to figure out.)
Replace the original zotero.jar with the newly-created one. (If following the above procedure, move up to its parent directory.)
>----STEP 6----------------------------------
Restart firefox and you should have the new features.
Misc. Notes:
* If you have problems, back out your changes by simply restoring the original zotero.jar file and restarting Firefox.
* The paste-as-plaintext is pretty klugy. It pops up a window, you paste into the window, click Insert and the text is pasted in. Better than nothing.
* Unfortunately spellcheck can't be enabled this way. That's a somewhat complex issue, I'll post more about it later.
* Again, you have to do this every time zotero is updated.
* If you have additional information about specific plugins, corrections, or other useful info please post to this thread.
Ill wait until an zotero update, im hopeful the search-terms option will pop up one day, in a way i can integrate it to my knowledge as ready-to-hand
cheers
We're missing the "remove all formatting" (included headings)
And even better if the plugin could allow adding other basic shortcuts. (ctrl+u underline is great, but the basic crl+space "remove all formatting" would be super)
https://groups.google.com/forum/#!topic/zotero-dev/nmtCLEb9zLA
https://forums.zotero.org/discussion/52608/future-direction-of-zotero-firefox-add-on#latest
Note that unzipping and hacking zotero.jar in zotero is not deemed to be best practice. However it works fine for me just to prototype some changes, followed by a later full re-build.
My conclusion is that upgrade of tinymce version does not appear to be on the agenda for Zotero 5.0.
However with minimum changes to /resource/tinymce/note.html a "sandbox" can be created so that content from textarea in tinymce 3.5.7 (the default version) is passed to TinyMCE 4.4.3 through the DOM.
You can then develop and add your own plugins to TinyMCE 4.4.3.
My own interest is adding more granular annotation to extracted annotations from ZotFile.
@Vialo, I have tested "remove formatting" feature in the popup TinyMCE 4.4.3 I have introduced into my Zotero stand alone and it works as expected.