# Access to Dom element in EditorField

**URL:** <https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782>\
**Category:** Development\
**Created:** [March 28, 2021, 11:26pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782 "2021-03-28T23:26:25Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArthurMilchior](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/arthurmilchior/32/4684_2.png) [@ArthurMilchior](https://forums.ankiweb.net/u/ArthurMilchior)\
**Post date:** [March 28, 2021, 11:26pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/1 "2021-03-28T23:26:25Z")

</div>

Hi,

I’m extremely confused and lost. I’m trying to port “[Resize image in editor](https://ankiweb.net/shared/info/1103084694)” for the new editor, as @NickFlint keep asking for, and I’m totally at lost about what’s going on. As he suggested, I’m asking for @hengiesel help or anybody who understand what’s going on here.

I need to access the images in the actual dom element. I know how to access the fields in the note, but that’s the back-end data, what I really need is the representation of the images, so that I can ensure they get resizable with jquery-ui.  
However, when I do:

```auto
var setFieldsInit = setFields;    
setFields = function(fields) {
    setFieldsInit(fields);
    const fieldsId = document.getElementById("fields");
    console.log(`fieldsId: ${fieldsId.outerHTML}`);
}

```

the result show empty html, there is not the fields content anymore.  
However,

```auto
console.log(fieldsId.children[0].editingArea.editable.fieldHTML) 

```

i correctly see the content of the field. I would have expected it to be the dom element (since fieldHtml actually change `innerHTML`), but it seems like even if I can manipulate this as dom, with jquery, changing it have no impact. So I feel like I missed something and really would love help to understand what

---

<div class="post-metadata">

**Author:** ![hengiesel](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/hengiesel/32/920_2.png) [@hengiesel](https://forums.ankiweb.net/u/hengiesel)\
**Post date:** [March 28, 2021, 11:47pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/2 "2021-03-28T23:47:14Z")

</div>

The fields content is in a [shadow root](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). The shadow root helps with isolating the user’s content from the web view. This way, styles defined for editor elements do not trickle through to the content. You can see this with AnkiWebInspector:

 ![Screenshot 2021-03-29 at 01.37.24](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/9/9b452c862f361f2fb066ef746171f68775bfb7f6.png)

There is no way to access all fields under one descriptor / one element. I’m also not sure jQuery has good support for shadow DOM. However you can also pass raw elements to jquery.

[However I’m not sure it’s going to work even then](https://robdodson.me/posts/dont-use-jquery-with-shadow-dom/).

EDIT: Does you add-on change the actual size of the image, or does it only resize the picture for the editor window?

---

<div class="post-metadata">

**Author:** ![ArthurMilchior](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/arthurmilchior/32/4684_2.png) [@ArthurMilchior](https://forums.ankiweb.net/u/ArthurMilchior)\
**Post date:** [March 29, 2021, 12:22am UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/3 "2021-03-29T00:22:56Z")

</div>

It changed the width and height element of omg tag

---

<div class="post-metadata">

**Author:** ![prollo](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@prollo](https://forums.ankiweb.net/u/prollo)\
**Post date:** [March 29, 2021, 5:42am UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/4 "2021-03-29T05:42:13Z")

</div>

I had to work with the fields too, and support both, the old and the new implementation.  
I did it like that:

```
cacheFields: function() {

        this._fields = [];
        if (!$('#fields [contenteditable]').length) {
            // 2.1.41+
            let fields = document.querySelectorAll('.field');
            for (let f of fields) {
                this._fields.push(f.shadowRoot.querySelector('anki-editable'));
            }
        } else {
            // - 2.1.40
            this._fields = document.querySelectorAll('.field');
        }
    }
```

---

<div class="post-metadata">

**Author:** ![ArthurMilchior](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/arthurmilchior/32/4684_2.png) [@ArthurMilchior](https://forums.ankiweb.net/u/ArthurMilchior)\
**Post date:** [March 29, 2021, 7:05pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/5 "2021-03-29T19:05:50Z")

</div>

And when you edit the content of this.\_fields in 2.1.41+, you actually get some dom you can edit, whose change is reflected on screen ? That seems it would answer my question, thank so much

---

<div class="post-metadata">

**Author:** ![prollo](https://avatars.discourse-cdn.com/v4/letter/p/a5b964/32.png) [@prollo](https://forums.ankiweb.net/u/prollo)\
**Post date:** [March 29, 2021, 7:29pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/6 "2021-03-29T19:29:20Z")

</div>

Yes, these are then normal `Element` objects. I used that function so I don’t have to query the elements everytime I need them (function is called on note loading). If you just need the fields, it can be even shorter I think:

```
function getFields() {
    if (!$('#fields [contenteditable]').length) {
          return [...document.querySelectorAll('.field')].map((x) => x.shadowRoot.querySelector('anki-editable'));
    } else {
          return document.querySelectorAll('.field')
    }
}
```

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [April 5, 2021, 11:13am UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/7 "2021-04-05T11:13:14Z")

</div>

What would be the simplest way to alter the shadow-root styles defined in `editable.css`? Do I need to write an add-on for that / hack it into an existing one?

To be more specific: I want to edit or override the `<u>` and `<i>` styles, which I am now using for Closet pre-template markup instead of classes, because these default tags are more forgiving in the editor (undo, shortcuts etc.).

> **Example with Image**
>
> Here I overwrote the styles within `editable.css` through the webview inspector (`<u>` in salmon, `<i>` in lime and underlined):
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/365128fb4f89c089a5812fd9544097e3ab3cc1c1.png)

@glutanimate’s add-on [Customize Editor Stylesheet](https://ankiweb.net/shared/info/1215991469) won’t work for that use case.

---

<div class="post-metadata">

**Author:** ![hengiesel](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/hengiesel/32/920_2.png) [@hengiesel](https://forums.ankiweb.net/u/hengiesel)\
**Post date:** [April 6, 2021, 5:36pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/8 "2021-04-06T17:36:39Z")

</div>

@kleinerpirat  
There’s [this PR](https://github.com/ankitects/anki/pull/1049) which would certainly help you out.

Besides that, you can only access it with add-ons. A somewhat minimal example for the Python part would be `load_collapsible_icon_js` in [Collapsible Fields](https://github.com/hgiesel/anki_collapsible_fields/blob/master/src/webview.py). Of course, you’d only need the CSS file.

A minimal example for the JS/CSS would be [the `load` function here](https://github.com/hgiesel/anki_persistent_editor/blob/master/web/editcurrent.js#L66) in `load`. You’d need to adjust `textContent` (or load it through a `link` element with `href`).

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [April 7, 2021, 4:35pm UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/9 "2021-04-07T16:35:36Z")

</div>

> [@hengiesel](#):
>
> A minimal example for the JS/CSS would be [the `load` function here](https://github.com/hgiesel/anki_persistent_editor/blob/master/web/editcurrent.js#L66) in `load` .

Thanks for taking the time, Henrik! 🚀  
I achieved what I wanted with that load function.

PR looks interesting too 👍

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 3:18am UTC](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/10 "2023-05-01T03:18:59Z")

</div>

Closed on May 1, 2023, 3:18am UTC