If you have a problem with the add-on extended editor for field (for tables, search&replace, …) post in this thread. This way I get notified. If you make a new thread I will likely miss it.
I can’t seem to find the save button
1 Like
In the lower right of the dialog there’s a “Save” button, see here.
Does this solve your problem?
Thanks for this report. Your screenshot helped. By default I initially set the height of the window to 1100 pixels, see here.
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).
1 Like
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 
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
@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.)
1 Like
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.
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.
1 Like
Thanks for the timely response. I will proceed with the update.
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
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.
});
@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. 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 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. There’s so much to do and so little time. So who knows if and when I’ll make this.
2 Likes
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!
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.
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.
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: ‘’,
The development version of Anki tries out this new feature which might be interesting for you:
Thanks for the shortcuts. I have added your idea to my todo list for the next bigger update (see my github issues)
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!
Hey, thanks for your add on, on the newest version of anki i cant find the icon, could you help me please?
@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?