How to show images in the Editor component

FernandoHumanes

Using EDITOR, I have made a component to load images into a record.
It works perfectly for me in the ADD and EDIT actions, but not in VIEW, because in this mode it does not execute the component.

How can I display an image that I have loaded in Base 64?

tasha

Hello

To display an image that you've loaded in Base64 format, you can add a custom component in the editor using registerEditorItem (as shown in row 7 / 14 in the Editor file). In this custom component, you can customize how the Base64 string is displayed, allowing you to show the image correctly in the VIEW mode.

Please check the example: https://stackblitz.com/edit/sveltejs-kit-template-default-zho2j3rs?file=src%2Froutes%2FEditor.svelte,src%2Froutes%2FEditorImage.svelte

FernandoHumanes

Thank you.
I had seen what you explained to me, but in EDITOR, when I execute the VIEW action, I normally set the EDITOR parameters "readonly= true", and in this case, the plugin that I have defined as in the example that you have provided me is not executed.

The only way I have seen is using 2 definitions of the EDITOR form fields, putting "readonly" to the fields, but that forces me to many other changes.

I hope that now I have better explained the problem that arises.
EDITOR component, VIEW action.

Greetings,
fernando

tasha

Thank you for your explanation regarding the EDITOR and the VIEW action. In readonly mode, we simply display the text values and boolean values are shown as Yes/No.

However, you can work around this limitation by registering your custom "readonly" component. You can do this with the following code:
registerEditorItem("readonly", CustomReadonly);

Inside your CustomReadonly component, you can determine when to show an image based on the props passed to it. This will override the default readonly component from the source code.
Here’s an example: https://stackblitz.com/edit/sveltejs-kit-template-default-zho2j3rs?file=src%2Froutes%2FEditor.svelte,src%2Froutes%2FCustomReadonly.svelte

FernandoHumanes

Thank you very much.

I think the solution you offer is very complex, since there are many other standard types, which should also establish the coding for the presentation.

I think it is fine as it is and in the case of establishing coded components, control should be given to these, passing the "readonly: true" attribute, so that only in that case, we produce a special edition.

With the current functionality, the solution is "weak" and not very usable for complex type forms.

Greetings,

Helga

Hello,

I agree that the solution is not optimal, just to work around the absence of specific API. Currently it allows to provide one custom component for all possible data fields, which is technically correct but is inconvenient to use in real projects.

In next versions we will add a more friendly option to register the field component for readonly mode only. It will be possible to reuse the same component as in the "edit" mode, since the config will be passed among props:

registerEditorItem("field_name", Component, { readonly: true});

Will that be better?

FernandoHumanes

Thanks,

I am trying to do a complete development using your solutions and my problem is that some of the problems that the development presents me with, I consider them so common, that by not finding a solution, it seems to me that the problem is that I have not known how to read their documentation.

In general, their products are very good, but I miss basic things and hence my problems, because I want to use their solutions and not mix with other libraries, since I consider it more appropriate, for those new to Svelte, to use the entire set of solutions from a single manufacturer.

Greetings,

Helga

Thank you for the feedback! The library is actively developing now, and providing API for real use cases is very important to us - we aim to cover most common needs, especially those that are requested by our users

FernandoHumanes

Thank you so much.

Although some details may be missing, their work is excellent.

Greetings,