Useful javascript snippets for the editor

Anki Add-ons
21

I could submit a PR to New Format Pack that implements these two ideas of yours @MIZMU @gnomek.

Of course, I’d also implement a config so you can choose which buttons you want.

4 Likes
22

@ MIZMU
Check also this add-on:
Custom Styles (font color, background colour, classes)

@kleinerpirat
Thank you very much.

1 Like
23

As @kleinerpirat pointed out in another thread: useful snippet for adding custom keyboard shortcuts in the new editor (in Editor Scripts & Symbols form):
{
“File”: “”,
“Language”: “JS”,
“Post”: “”,
“Pre”: “(function(){const btn = document.querySelector(\”[title^=‘Increase indent’]\"); const state = btn.disabled; btn.disabled = false, btn.click(), btn.disabled = state;})();",
“Script”: “Indent”,
“Shortcut”: “Ctrl+shift+:”
}

Handy for those of us with keyboards that have symbols in the ‘wrong places’, for instance keyboards where colon is ‘shift dot’ making it impossible to press ‘ctrl+shift+.’

24

ok. this for font size:

 setFormat("fontSize", "7")

But it is only limited to a size between 1-7
I tried the following solution (source):

<script>
function changeFont() {
 
   setFormat("fontSize", "7");
 
   var fontElements = document.getElementsByTagName("font");
 
   for (var i = 0, len = fontElements.length; i < len; ++i) {
 
       if (fontElements[i].size == "7") {
 
           fontElements[i].removeAttribute("size");
 
           fontElements[i].style.fontSize = "30px";
			
       }
 
   }
  
}
</script>

But it unfortunately did not work.

Also, I tried to perform the same method on the font family and it also did not work.:

setFormat('fontName', "Arial");

I’m waiting for the experts …

25

It’s updated now (new upload): Remove Cloze Button and Hotkey - AnkiWeb

26

Without looking into it too much, I think the “current” approach would be to wrap the text in a <span>-tag and set the font size with CSS: font-size: 30px; font-family: Arial; . The <font>-tag is deprecated (<font> - HTML: HyperText Markup Language | MDN). You can get the calculated font-size (taking all CSS into account) with window.getComputedStyle(), i.e. something like window.getComputedStyle(document.activeElement.shadowRoot.firstElementChild).fontSize. So maybe do something like:

  1. Wrap selection in a span tag with a unique ID so that you know “it’s yours” (I usually use the UUID module for that)
  2. Get the computedStyle() for the span
  3. Populate your popup menu
  4. Apply the new font size directly to the span style

Now, having said that it is going to be a bit more tricky when you mix in that your selection might bridge other HTML tags, for instance start in one <li> and end in another - this will require splitting the <span> into two etc.

27

I ended up using:

f"setFormat('{style}', '{val}');"
style= fontName/fontSize
28

I want this too…! I just want to change the size of the font in the editor so I can easily emphasize the point(I think bold and other styles like underline are not good or distinct enough), but I’m not familiar with html and js. I tried to change the “Uppercase” script but it failed, I know it’s not hard but can someone please tell me how to do it? Really Thanks!
BTW, I just want to implement it as it is in Ankidroid like this:
There’s a button T(Here it needs to select and right click using this plugin, but thai’s ok :slight_smile: ), you can click it and make the text you selected bigger or smaller.
(And the Custom Styles (font color, background colour, classes) addon didn’t work for me.)

29

You can change the appearance of bold text (= content within <b> tags) with CSS in your note template:

b {
  font-size: xx-large;
  font-family Comic Sans;
  text-transform: uppercase;
  /* etc.. */
}
30

Yeah, but that’ll have an effect on the existing card content, and there’s a lot of content in the cards. And what I wanna do is to get a single function or snippet, to change the font size freely.

31

In [Editor Scripts & Symbols] format: Scroll the entire fields area from keyboard

  {
   "1. Menu": "Scroll",
   "3. Items": [
    {
     "1. Script": "Up",
     "2. Shortcut": "Ctrl+Alt+Up",
     "3. Language": "JS",
     "4. Pre": "document.querySelector('div.fields').scrollTop -= 200"
    },
    {
     "1. Script": "Down",
     "2. Shortcut": "Ctrl+Alt+Down",
     "3. Language": "JS",
     "4. Pre": "document.querySelector('div.fields').scrollTop += 200"
    },
    {
     "1. Script": "Left",
     "2. Shortcut": "Ctrl+Alt+Left",
     "3. Language": "JS",
     "4. Pre": "document.querySelector('div.fields').scrollLeft -=200"
    },
    {
     "1. Script": "Right",
     "2. Shortcut": "Ctrl+Alt+Right",
     "3. Language": "JS",
     "4. Pre": "document.querySelector('div.fields').scrollLeft += 200"
    },
    {
     "1. Script": "Home",
     "2. Shortcut": "Ctrl+Alt+Home",
     "3. Language": "JS",
     "4. Pre": "document.querySelector('div.fields').scrollTo(0, 0)"
    },
    {
     "1. Script": "End",
     "2. Shortcut": "Ctrl+Alt+End",
     "3. Language": "JS",
     "4. Pre": "let el = document.querySelector('div.fields'); el.scrollTo(el.scrollWidth, el.scrollHeight)"
    }
   ]
  }
32

I added a sentence case function to speed up my workflow, sharing it here for anyone else who could benefit from it. Sorry for the ugly formatting but I needed to make sure all the escape characters appear as needed:

{ "1. Script": "Sentence case", "2. Shortcut": "Shift+Alt+S", "3. Language": "JS", "4. Pre": "(function(){const sel = document.activeElement.shadowRoot.getSelection();for(i=0;i<sel.rangeCount;i++){const rng = sel.getRangeAt(i);let input = new XMLSerializer().serializeToString(rng.extractContents());input = input.toLowerCase();input = input.replace(/(^|\\.\\s+|\\!\\s+|\\?\\s+)(\\w)/g,function(c){return c.toUpperCase();});rng.insertNode(rng.createContextualFragment(input));sel.addRange(rng);}})();", "5. File": "", "6. Post": "" }