# Extended editor for field (for tables, search&replace, ...) \[Official thread\]

**URL:** https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552
**Category:** Add-ons
**Created:** [June 27, 2020, 6:34pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552 "2020-06-27T18:34:57Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [June 27, 2020, 6:34pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/1 "2020-06-27T18:34:57Z")

</div>

If you have a problem with the add-on [extended editor for field (for tables, search&replace, …)](https://ankiweb.net/shared/info/805891399) post in this thread. This way I get notified. If you make a new thread I will likely miss it.

---

<div class="post-metadata">

### Author: ![daniellam133](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@daniellam133](https://forums.ankiweb.net/u/daniellam133)
#### Post date: [July 6, 2020, 8:50am UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/2 "2020-07-06T08:50:46Z")

</div>

I can’t seem to find the save button

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [July 6, 2020, 10:19am UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/3 "2020-07-06T10:19:08Z")

</div>

In the lower right of the dialog there’s a “Save” button, see [here](https://raw.githubusercontent.com/ijgnd/anki__editor_jseditor_for_current_field/master/screenshots/v5_nightmode.png).

Does this solve your problem?

---

<div class="post-metadata">

### Author: ![eatsleepswim](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@eatsleepswim](https://forums.ankiweb.net/u/eatsleepswim)
#### Post date: [July 28, 2020, 3:12pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/4 "2020-07-28T15:12:24Z")

</div>

I had the same problem. Here’s a screenshot

 ![TableEditor_NoSaveButton](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/2436a821c62f57c42e2d17e6dc654925116b3262.png)

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [July 28, 2020, 3:33pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/5 "2020-07-28T15:33:10Z")

</div>

Thanks for this report. Your screenshot helped. By default I initially set the height of the window to 1100 pixels, see [here](https://github.com/ijgnd/anki__editor_jseditor_for_current_field/blob/97e641e71a0e386c3fa95903821b5d7f6edce72a/src/external_js_editor_for_field.py#L207).

If e.g. you have a widescreen display that has a height of 1080 pixels and a window taskbar that has a height of 40 pixels so that there are only 1040 pixels on your screen this should happen: 1100-1040 = 60 pixels are probably hidden, most likely at the bottom.

To test this hypothesis: Make the window smaller. Most people I know resize from a bottom corner but you can also do it from the top.

Does this solve your problem? Let me know so that if this is the solution so that I can upload a fixed version with a smaller default height (or that otherwise we can continue narrowing down the problem).

---

<div class="post-metadata">

### Author: ![eatsleepswim](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@eatsleepswim](https://forums.ankiweb.net/u/eatsleepswim)
#### Post date: [July 29, 2020, 3:06pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/6 "2020-07-29T15:06:21Z")

</div>

Great, that fixed the problem! The protip of resizing from the top corner was key. I’m used to only resizing from the bottom corner, which wasn’t viewable (ergo the site of the “save” button). Thank you 😃

---

<div class="post-metadata">

### Author: ![TitanEsXVI](https://avatars.discourse-cdn.com/v4/letter/t/e68b1a/32.png) [@TitanEsXVI](https://forums.ankiweb.net/u/TitanEsXVI)
#### Post date: [July 30, 2020, 10:21pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/7 "2020-07-30T22:21:34Z")

</div>

First of all thank you for such a asome addon  
My problem while I am editing tables is that , when I add an arrow to the table and I click save, the arrow appears as a columm In the picture for example when I was on the editor the diagnossis colum, should go below Common causes of ascites and not next to it

 ![1](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/c066549f961431e2dcc1ac945a53f8ceb30213c6.png)

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [July 30, 2020, 11:24pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/8 "2020-07-30T23:24:54Z")

</div>

@TitanEsXVI: Your post has “when I add an arrow”. I assume your autocorrect interfered when you wanted tow write “when I add a row”.

I can’t reproduce the problem. But that doesn’t say much. It would help if you could share the html source code of the field that contains the table.

to get the html source of the affected field: In the browser select this card and put the cursor into the field that contains the text that is sometimes shown in bold. Then press Ctrl+Shift+x. A window should open that contains the html source code. Post it. When you post it into this forum make sure that it’s properly displayed. Select the html source code you pasted then from the top of your editing window click the symbol \</\> “Preformatted Text”.

Maybe also share this: from the main window click on Help-\>About. In the window that opens click the “Copy Debug Info” Button and share the copied text.)

---

<div class="post-metadata">

### Author: ![mjc6111](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@mjc6111](https://forums.ankiweb.net/u/mjc6111)
#### Post date: [August 1, 2020, 5:20pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/9 "2020-08-01T17:20:27Z")

</div>

I have Anki V2.1.20. After the Table Editor update on 7-30-2020, the Table Editor no longer works. Must I update Anki to V2.1.22 to enable the Table Editor, or is there something I can do to enable it without updating Anki?

Please frame any explanation in terms that someone with virtually no background in computer software can understand.

Thanks.

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [August 1, 2020, 6:13pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/10 "2020-08-01T18:13:39Z")

</div>

> Must I update Anki to V2.1.22 to enable the Table Editor

Yes.

If you had advanced knowledge about computer software and were particularly motivated it might be different. But even in this case updating to 2.1.22 would be easier and better.

---

<div class="post-metadata">

### Author: ![mjc6111](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@mjc6111](https://forums.ankiweb.net/u/mjc6111)
#### Post date: [August 1, 2020, 6:54pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/11 "2020-08-01T18:54:24Z")

</div>

Thanks for the timely response. I will proceed with the update.

---

<div class="post-metadata">

### Author: ![jambamboleo](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@jambamboleo](https://forums.ankiweb.net/u/jambamboleo)
#### Post date: [December 14, 2020, 10:37am UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/12 "2020-12-14T10:37:06Z")

</div>

How can we change the skin and/or theme? In your sample screenshot on ankiweb it looks dark – you also write that you use a specific skin.

I have found general instructions on the web. However, it seems like TinyMCE in the add-on differs from the standalone. Namely, I didn’t find the file where I am supposed to enter a text like

```auto
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  skin: 'oxide-dark',
  content_css: 'dark' // > **Note** : This feature is only available for TinyMCE 5.1 and later.
});

```

> **[TinyMCE | Customizing the editor UI](https://www.tiny.cloud/docs/general-configuration-guide/customize-ui/)**
>
> Learn how to change the appearance of TinyMCE.

  

> **[How to setup TinyMCE text editor - TinyMCE - DYclassroom | Have fun learning :-)](https://dyclassroom.com/tinymce/how-to-setup-tinymce-text-editor)**

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [December 14, 2020, 6:03pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/13 "2020-12-14T18:03:47Z")

</div>

@jambamboleo: Open the add-on folder in a file manager. You can get there from Main Window -\> Tools -\> Add-ons. In the addon manager dialog select my add-on, then press the button “View Files”. This should open the add-on folder (named `805891399`) in your file manager.

Most of the configuration is in the file [template\_tiny5\_body.html](https://github.com/ijgnd/anki__editor_jseditor_for_current_field/blob/master/src/template_tiny5_body.html). But the skin is not set in this file and you may not remove the placeholder in there. Instead you have to modify [external\_js\_editor\_for\_field.py](https://github.com/ijgnd/anki__editor_jseditor_for_current_field/blob/f9d8e75daf77d06f2afe19fad8820f8eea93a667/src/external_js_editor_for_field.py#L412) around line 412 in your favorite text editor.

Whenever the add-on is updated these customizations will be overwritten with my version so you have to reapply them. At the moment there’s no user option to set the styling. This would be an enhancement for future versions.

I added a reminder for me [here](https://github.com/ijgnd/anki__editor_jseditor_for_current_field/issues/5). There’s so much to do and so little time. So who knows if and when I’ll make this.

---

<div class="post-metadata">

### Author: ![TRIAEIOU](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@TRIAEIOU](https://forums.ankiweb.net/u/TRIAEIOU)
#### Post date: [January 11, 2021, 7:19pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/14 "2021-01-11T19:19:45Z")

</div>

Hi, thanks for a great add-on!

A quick question, I want to run some regexes on the content before it is returned to the browser editor, where/how would be the best place to insert those so they are executed on window accept? I have already modified template\_tiny5\_body.html adding a number of shortcuts as well as some regexes on load and would prefer to keep all mods to one file if possible (as it will be overwritten on add-on update). Is there any event or something else that fires that I could hook into in template\_tiny5\_body.html?

If that’s not possible I guess here would be a good place to insert the regexes my (python skills are inexistent)?

external\_js\_editor\_for\_field.phy, L321

> ```
> def onAccept(self):
> global editedfieldcontent
> editedfieldcontent = self.web.sync_execJavaScript(self.jsSavecommand)
> self.web = None
> # self.web._page.windowCloseRequested() # native qt signal not callable
> # self.web._page.windowCloseRequested.connect(self.web._page.window_close_requested)
> saveGeom(self, "805891399_winsize")
> self.accept()
> # self.done(0)
> 
> ```

A thought would be to add separate files for custom load and unload events that are simply included at the right place, should be easy to implement and a basic way to let people add their own customizations without them being overwritten on add-on update.

Thanks!

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [January 13, 2021, 10:55pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/15 "2021-01-13T22:55:09Z")

</div>

your idea should work. The line `editedfieldcontent = self.web.sync_execJavaScript(self.jsSavecommand)` from the snippet you posted gets the field content out of the tinymce editor. So after this line it should work to modify it like `editedfieldcontent = editedfieldcontent.replace("a", "b")` (or some regexes).

I like your idea of user configurable regular expressions to run. Actually I have an unpublished add-on that runs custom replacements and regular expressions on a field when I press a shortcut. I could also publish this. But since you run the regexes before _and after_ tinymce I guess you have a special use case I don’t see. Maybe you could describe it a bit more. This sounds interesting.

Anyway I’ll add this to the list of ideas for my next major modification of this add-on. But I’ve been pretty busy lately so I have no idea when or even if it’ll be in a future version. But maybe your use case convinces me.

&nbsp;

If you have some useful and generic shortcuts for tinymce to share I could also include them in the next version? I’m not a lawyer so I’m not if this is needed. Make sure to state that you share your code under the AGPL. thanks.

---

<div class="post-metadata">

### Author: ![TRIAEIOU](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@TRIAEIOU](https://forums.ankiweb.net/u/TRIAEIOU)
#### Post date: [January 13, 2021, 11:52pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/16 "2021-01-13T23:52:56Z")

</div>

Great, thanks, I’ll try that out!

As for my use case, the \<div\>'s that the regular editor keeps inserting is driving me nuts beause of how I write my notes and cards (I find it easier and more maintainable to keep all related items on the same note and use Cloze Hide All). I haven’t found where in the source that happens so I am using tinyMCE in the mean time.

So the regexes I run on open is to strip out all \<span\> and \<div\> that have no properties that may have been inserted. On close I want to remove a few \<br\>'s given how my notes and cards are formed (remove \<br\>'s before lists and images if they are the first after a cloze open tag.

As for the shortcuts, these are the ones I have added (some are just re-mappings of the normal ones). I doubt it is necessary but: all in this post is free for anyone to use however they see fit.

> editor.addShortcut(‘F7’, ‘nextCloze’, ‘nextCloze’);  
> editor.ui.registry.addButton(‘nextCloze’, {  
> text: ‘Cln’,  
> tooltip: ‘nextCloze’ + ‘(’ + ‘F7’ + ‘)’,  
> onAction: () =\> {editor.execCommand(‘nextCloze’);}});  
> editor.addShortcut(‘F8’, ‘addCloze’, ‘sameCloze’);  
> editor.ui.registry.addButton(‘sameCloze’, {  
> text: ‘Cls’,  
> tooltip: ‘sameCloze’ + ‘(’ + ‘F8’ + ‘)’,  
> onAction: () =\> {editor.execCommand(‘sameCloze’);}});  
> editor.addShortcut(‘F9’, ‘InsertUnorderedList’, ‘InsertUnorderedList’);|  
> editor.addShortcut(‘F10’, ‘InsertOrderedList’, ‘InsertOrderedList’); //F12|  
> editor.addShortcut(“F11”, ‘Subscript’, ‘Subscript’);  
> editor.addShortcut(“F12”, ‘Superscript’, ‘Superscript’);  
> editor.addShortcut(‘Ctrl+E’, ‘Special character’, function() {editor.execCommand(‘mceShowCharmap’);});  
> editor.addShortcut(‘Alt+39’, ‘Insert → (Alt+ArrowRight)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘→’);});  
> editor.addShortcut(‘Shift+Alt+39’, ‘Insert ⇒ (Shift+Alt+ArrowRight)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘⇒’);});  
> editor.addShortcut(‘Ctrl+Alt+39’, ‘Insert ↔ (Ctrl+Alt+ArrowRight)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘↔’);});  
> editor.addShortcut(‘Ctrl+Shift+Alt+39’, ‘Insert ⇔ (Ctrl+Shift+Alt+ArrowRight)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘⇔’);});  
> editor.addShortcut(‘Alt+37’, ‘Insert ← (Alt+ArrowLeft)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘←’);});  
> editor.addShortcut(‘Shift+Alt+37’, ‘Insert ⇐ (Shift+Alt+ArrowLeft)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘⇐’);});  
> editor.addShortcut(‘Alt+38’, ‘Insert ↑ (Alt+ArrowUp)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘↑’);});  
> editor.addShortcut(‘Shift+Alt+38’, ‘Insert ⇑ (Shift+Alt+ArrowUp)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘⇑’);});  
> editor.addShortcut(‘Alt+40’, ‘Insert ↓ (Alt+ArrowDown)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘↓’);});  
> editor.addShortcut(‘Shift+Alt+40’, ‘Insert ⇓ (Shift+Alt+ArrowDown)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘⇓’);});  
> editor.addShortcut(‘Alt+A’, ‘Insert α (Alt+A)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘α’);});  
> editor.addShortcut(‘Alt+B’, ‘Insert β (Alt+B)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘β’);});  
> editor.addShortcut(‘Alt+G’, ‘Insert γ (Alt+G)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘γ’);});  
> editor.addShortcut(‘Alt+D’, ‘Insert δ (Alt+D)’, function () {editor.execCommand(‘mceInsertContent’, 0, ‘δ’);});  
> editor.addShortcut(‘Ctrl+Alt+U’, ‘Upper case (Ctrl+Alt+U)’, function () {editor.execCommand(‘mceInsertRawHTML’, 0, editor.selection.getContent({ format: ‘html’ }).toUpperCase());});  
> editor.addShortcut(‘Ctrl+Alt+L’, ‘Lower case (Ctrl+Alt+L)’, function () {editor.execCommand(‘mceInsertRawHTML’, 0, editor.selection.getContent({ format: ‘html’ }).toLowerCase());});

The onload regex:

> \<script\>  
> var cont = document.getElementById(“tinymce5\_wysiwyg\_unique”).innerHTML;  
> cont = cont.replace(/\<p\>/gms, “”);  
> cont = cont.replace(/\</p\>/gms, “\<br/\>”);  
> var tmp = “”;  
> while (cont != tmp) {  
> tmp = cont;  
> cont = cont.replace(/\<div\>(((?!\<div\>).)\*?)\</div\>/gms, “$1\<br/\>”);  
> }  
> document.getElementById(“tinymce5\_wysiwyg\_unique”).innerHTML = cont;  
> \</script\>

And the settings to avoid \<divs\> etc on newline:

> tinymce.init({  
> force\_br\_newlines: false,  
> force\_p\_newlines: false,  
> convert\_newlines\_to\_brs: false,  
> forced\_root\_block: ‘’,

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [January 16, 2021, 9:29am UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/17 "2021-01-16T09:29:12Z")

</div>

The development version of Anki tries out this new feature which might be interesting for you:

> <https://github.com/ankitects/anki/pull/925>

Thanks for the shortcuts. I have added your idea to my todo list for the next bigger update (see my github issues)

---

<div class="post-metadata">

### Author: ![TRIAEIOU](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@TRIAEIOU](https://forums.ankiweb.net/u/TRIAEIOU)
#### Post date: [January 16, 2021, 12:11pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/18 "2021-01-16T12:11:04Z")

</div>

Thanks, I already found a solution to it which I posted in another thread, I don’t know if they implement my solution or another but on my end I have it working very well now.

Cheers!

---

<div class="post-metadata">

### Author: ![Shah](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@Shah](https://forums.ankiweb.net/u/Shah)
#### Post date: [April 22, 2021, 2:51pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/19 "2021-04-22T14:51:27Z")

</div>

Hey, thanks for your add on, on the newest version of anki i cant find the icon, could you help me please?

---

<div class="post-metadata">

### Author: ![ijgnd](https://avatars.discourse-cdn.com/v4/letter/i/bbe5ce/32.png) [@ijgnd](https://forums.ankiweb.net/u/ijgnd)
#### Post date: [April 22, 2021, 3:21pm UTC](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552/20 "2021-04-22T15:21:31Z")

</div>

@Shah: In the latest version 2.1.43 I see the icon and I haven’t had bug reports about this. You could try this:

- what’s the “newest version of anki”? I wonder because the newest one is probably not the one released for a general release but the experimental version from github and this experimental version made changes to how buttons are drawn …
- restart Anki and check again
- reset the setting of my add-on to the default (when you adjust the settings there’s a little button “reset”), restart anki and check again. You can hide/disable buttons in the config - but that’s not related to newer anki versions.
- disable all other add-on, restart, and check again. Do you see my button now? If so maybe it’s an add-on conflict. Then reenable half and restart again and check if it’s there. Do this a few times until you find the conflicting add-on.

does this solve the problem?

[Next page](https://forums.ankiweb.net/t/extended-editor-for-field-for-tables-search-replace-official-thread/552.md?page=2)
