HTML source editor for Evernote (web) – a bookmarklet! [Updated 2014-08-12]

evernote-html
Click to view full size

I use Evernote for storing basically everything. Reference, notes, bookmarks (with notes about the bookmark), a journal (although this is a recent addition… we’ll see how long it lasts!) and some parts of my GTD workflow. It’s a fantastic tool with clients for Windows, Linux (Everpad, NixNote), Android, Mac, iPhone and of course, the web (where I use it most).

<shameless_beg>
Signup to Evernote here and reward me with some Evernote points.
</shameless_beg>

Anyway, every now and again, I get a bit frustrated by the editor Evernote uses on their web interface – some little quirk of layout will start misbehaving (usually with nested lists) in the body of my notes. The editor they use is a customized version of TinyMCE, but there’s no button to switch to HTML view (as there normally is in TinyMCE) which I’d normally do to fix these things. However! (and finally to the point of this article) you can inject events into a running instance of TinyMCE so that’s what this bookmarklet does – it sends the mceCodeEditor to the main Evernote editor (which happens to be the second instance of TinyMCE on the page) to let you edit the HTML source directly.

Drag this to your bookmarks toolbar (no tracking or otherwise underhanded shenanigans, I promise!):
Evernote HTML Editor v2

Simply visit one of your notes in Evernote, click in the editor portion to go into edit mode (this is important – otherwise it won’t always edit the most recent note content), then click your new bookmarklet. A plaintext html editor should pop up, and clikcking update will return you to the note with your updated content.

Disclaimer: this is interacting with Evernote in a way they a) don’t document and b) probably wouldn’t recommend, but it’s useful until they add a native “edit source” feature, so please don’t hold me responsible if something goes wrong!

There’s also an ENML editor plugin thing here that lets you actually edit the underlying source of the note itself (not just its content as presented by the editor) but that requires you give the app access to your Evernote account, and sometimes for quick formatting edits whilst you’re mid-flow, is a bit much. It’s also a bit easier to completely break your notes as it edits all aspects of the note, not just the body (unlike the bookmarklet). Sometimes though, that’s exactly what you need..

Let me know if you have any issues 🙂

Source

I’ve made this available as a GitHub Gist under the Apache 2.0 License:


/*
Copyright 2015 Seb Maynard
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
var getCurrentContent = function() {
return $("#tinymce", $("iframe").contents()).first().html();
};
var setCurrentContent = function(content) {
$("#tinymce", $("iframe").contents()).first().html(content);
$(".ennote", $("iframe").contents()).first().html(content);
};
var popupTextArea = function() {
var theDiv = $("<" + "div style='text-align: right; z-index: 1000000; position: fixed; top: 20px; left: 20px; right: 20px; bottom: 20px;'><" + "/div>");
var theTextArea = $("<" + "textarea style='display: block; width: 100%; height: 90%;'><" + "/textarea>");
theTextArea.val(getCurrentContent());
var theButton = $("<" + "input type='button' value='save' />");
theButton.click(function() {
setCurrentContent(theTextArea.val());
theDiv.remove();
});
theDiv.append(theTextArea);
theDiv.append(theButton);
$("body").append(theDiv);
};
popupTextArea();

view raw

bookmarklet.js

hosted with ❤ by GitHub

User Script (Greasy Fork)

Lazza (from the comments below) has made a User Script on Greasy Fork which adds a bunch of features! You can find it here:
https://greasyfork.org/it/scripts/8869-evernote-web-html-editor


Posted

in

,

by

Tags:

Comments

46 responses to “HTML source editor for Evernote (web) – a bookmarklet! [Updated 2014-08-12]”

  1. waqueteu Avatar
    waqueteu

    Works fine, it will help me a lot.

    Thanks.

    1. Seb Avatar

      Excellent, glad it’s useful for you 🙂

  2. steve Avatar
    steve

    thanx.

    1. Seb Avatar

      You’re welcome! Hope you find it helpful

  3. […] HTML source editor for Evernote (web) – a bookmarklet! […]

  4. Sean P. O. MacCath-Moran Avatar

    This was exactly what I needed and it works a treat. Thanks for posting it!

    1. Seb Avatar

      Great, glad it worked for you 🙂

  5. Edward Martino, PhD (@ermphd) Avatar

    Excellent tip and trick! I am making templates for my eCourse “Disc Golf for Boomers” Your bookmarklet is perfect for designing them when EN does something I don’t want. 🙂

    FYI I made them in a notebook “Templates” and will export for learners and add to my materials.

    Gr8 work!

    1. Seb Avatar

      Great! Glad it was useful for you; I’ve just updated it so it works with the new Evernote updates too!

  6. […] led me to a cool tool that allows EN web users to access the background HTML that supports EN, a bookmarklet created by Seb Maynard. As an experienced EN user, I have been frustrated at times with the limits imposed by the EN […]

  7. Ângelo Avatar
    Ângelo

    WHOA! JUST WHAT I NEEDED! THANKS MAN!

    1. Seb Avatar

      You’re welcome 🙂

  8. Dino Avatar
    Dino

    Doesn’t work anymore 🙁

    1. Seb Avatar

      I just fixed it! Please let me know if it’s still not working for you and I’ll do my best to make it work!

  9. Mike Blyth Avatar
    Mike Blyth

    Nice, thanks! Works in IE but not Chrome or Firefox. In Chrome, nothing happens. In Firefox, the HTML is briefly displayed then disappears leaving the word “true” as the only content of the window.

    1. Seb Avatar

      That’s very strange – I’ve just tested it in Firefox and Chrome (and Chrome is my main browser that I used to make it) and it works fine – have you got any script blockers or something stopping it?

  10. Ralf Avatar
    Ralf

    Thank you for the analysis and bookmarklet. What tool did you use for preparing the bookmarklet?

  11. KenH Avatar
    KenH

    Ditto, doesn’t work for me in Firefox.

  12. KenH Avatar
    KenH

    Actually what I really want to do, is to inject some tools…specifically floating images. I can attach, drag, but I need to directly edit html to make them float.

    Something like this is what I’d really like:
    http://www.tinymce.com/forum/viewtopic.php?id=31766

  13. Chris Avatar
    Chris

    What worked for me in Firefox (latest version):
    browse to the bookmarkleter mentioned above (http://chriszarate.github.io/bookmarkleter/) and copy paste the code above (after “What the bookmarklet does”). Make sure to only select URL Encode, not the others … and drag this bookmarklet to your bookmarks bar.

  14. Suckulus Avatar
    Suckulus

    I disagree!

    1. Seb Avatar

      Glad to hear it!

  15. Peter Avatar
    Peter

    Just wanted to thank you. This is awesome! I wish I could buy you a pint! No… make that two pints!

    1. Seb Avatar

      Haha! Glad you found it useful 🙂

      Also, if that pint offer still stands…. I’ve added a PayPal donate button 😉 if only my local accepted PayPal!

  16. rdy4life Avatar
    rdy4life

    Thank you, thank you, thank you. I have been going insane with Evernote screwing up div heights.

    1. Seb Avatar

      You’re welcome – that’s exactly the same reason I built it 🙂

  17. Lazza Avatar

    That’s very handy! 🙂 Thank you for posting it. Have you considered turning it into a user-script maybe also with a button (in the Evernote interface) that can be clicked to trigger it? I usually use Chromium in app-mode to run Evernote Web, so there are no toolbars.

    1. Seb Avatar

      You’re welcome! I’ll email you re the user-script

      1. Lazza Avatar

        Hi Seb, could you check the URL at the end of the post? It seems it can’t be clicked. Thank you. 🙂

        1. Seb Avatar

          Fixed! Thanks for the heads up 🙂

          1. Lazza Avatar

            Great. 🙂 In the meawhile, I published a new script that gives the in-app note link of any note, to make cross-references. You can find it linked in the description of the HTML editor script.

  18. […] è il motivo per cui mi sono imbattuto nel blog di Seb Maynard, uno sviluppatore che ha creato un bookmarklet per Evernote Web che consente di modificare l’HTML. Il bookmarklet funziona bene, però richiede di essere […]

  19. Blaine Avatar

    Thanks for this. Now I’m trying to figure out Lazza’s script. I’m basically green when it comes to code and such things. Your bookmarklet works great though. What i”m finding is that the un-formatted HTML is such as mess I can’t work on it.

    1. Lazza Avatar

      Luckily, you don’t have to go through the details and inner workings of the script. You need only to press the “Install” button after adding the proper extension for your browser. 🙂

      1. Blaine Avatar

        Thanks, Lazza. I’m sorry but I’m not clear what extension to add to my browser. I run Chrome in Windows 10. I can’t seem to understand how to install the script.

        1. Lazza Avatar

          There is a big help button containing clear instructions on how to install a script on every Greasyfork page:

          May I know why you left a negative review on my script if you didn’t install it yet?

          1. Lazza Avatar

            Where did my image go?

            Ok here’s a link instead of a picture: http://i.imgur.com/jSU5kRl.png

          2. Blaine Avatar

            Hi Lazza–my bad leaving negative feedback. Was trying to leave status, I added a new comment. I’m trying to get it to work using Tampermonkey, thanks.

          3. Blaine Avatar

            I have it working now and it is great. This is really what I needed.

            I want to be clear that I apologize for my feedback blunder on Greasy Fork and I have updated to positive.

            Thanks to Lazza for helping me.

          4. Lazza Avatar

            Blaine, thank you for updating the rating. I am glad you got it working. 🙂

  20. Blaine Avatar

    Just another update, now that I have been working with this for a while. I’m getting the hang of the oddities in ENML and how to clean them out. The editor is very good for this, as it nicely highlights un-paired html elements (like matching a /div with a div and vice versa). The captures into ENML are VERY VERY messy, I have found it helpful to copy from the editor to a text editor and remove junk with search/replace, then paste back and tidy up in Lazza’a editor.

    1. Lazza Avatar

      Do you mean that ENML code shows up in the HTML box when you use my script? Uhm, that’s a bit strange… it should show HTML only. Do you have an example note you could share?

  21. HTML source editor for Evernote (web)

    […]4. Within the handle consent choices, you possibly can see the providers and functions utilizing your Dwell ID.[…]

  22. […] è il motivo per cui mi sono imbattuto nel blog di Seb Maynard, uno sviluppatore che ha creato un bookmarklet per Evernote Web che consente di modificare l’HTML. Il bookmarklet funziona bene, però richiede di essere […]

  23. […] you want a bookmarklet that does exactly that (i.e. Ive done it for you!), see here http://seb.so/html-source-editor-for-evernote-web-a-bookmarklet/ for more […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.