[SOLVED] Custom Editor localizable

Support
1

Hello.

I have ran into an issue with Custom Editors and translations. I have successfully implemented https://editorjs.io/ as a custom editor as a JSON field type and it works and saves and loads and everything is great.

The problem is when the field with custom editor is localizable and I try to switch the language in the Admin UI at the field’s top right the content stays the same (e.g. it is not possible to translate because the two languages share the same content). I tested with the example CKEditor provided in the docs and it is the same behavior. Is there a way to make the custom editors localizable? Am I missing something obvious in the documentation?

Thanks a lot!

2

You have to distinguish between the localization of the UI and the location of fields. You can make a field localizable and then manage content in japanese and chinese language and have the UI in italian language.

At the moment the current language is not passed to the editor, but this can be changed. But for now you could just rely on the browser language and initialize the editor based on that.

3

I think I haven’t explained the situation well… What I meant if the field is localizable we cannot manage the content in different languages. The content is the same for all languages. The UI language is not a problem since everyone of our editors speak english.

4

Can you share your code?

5

Btw. Which version do you use?

6

Sure but it is the same situation with the example CKEditor in the documentation.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cloud.squidex.io/scripts/editor-sdk.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>

    <!-- <script src="./plugins/season_results.js"></script> -->
    <!-- <link rel="stylesheet" href="./plugins/season_results.css"> -->

    <style>
        #editor {
            border: 1px solid #dbe4eb;
            border-radius: .25rem;
            padding: 1rem .375rem .75rem;
        }
    </style>
</head>

<body>
    <div id="editor"></div>
    <script>
    let field = null;
    const editorJs = new EditorJS({
        holder: 'editor',
        tools: {
            header: Header,
            list: List
        },
        placeholder: 'Let`s write an awesome story!',
        onReady: () => {
            field = new SquidexFormField();

            field.onValueChanged(function (value) {
                if (value) {
                    editorJs.render(value);
                }
            });

            // Disable the editor when it should be disabled.
            field.onDisabled(function (disabled) {
                // editor.set('isReadOnly', disabled);
            });
        },
        onChange: () => {
            field.touched();
            editorJs.save().then((outputData) => {
                field.valueChanged(outputData);
            }).catch((error) => {
                console.log('Saving failed: ', error)
            });
        }
    });
</script>
</body>
7

It is the same on cloud as on my local which is 4.6.0

8

You have to change

field.onValueChanged(function (value) {
                if (value) {
                    editorJs.render(value);
                }
            });

to

field.onValueChanged(function (value) {
   editorJs.render(value || '');
});

Otherwise you do not update the editor when you switch from a language with a value to another language with no value yet.

BTW: EditorJs does not seem to support a readonly mode. You can just add an transparent overlay over the editor which captures all events.

1 Like
9

Thanks that did it. I feel kinda bad to bother you with this which is certainly my fault :wink: Thank you

1 Like