Paragraph and Heading not translated

[Lucía]

Hello,

We want to have translations in Spanish, French and Portuguese for the users of our application who use such languages. We managed to translate all editor components, "Font Name", "Font Size". All successful except for the "FormatBlock". 

In the FormatBlock dropdown, Kendo UI Rich Text editor is missing the translations and we will open a support case to request the feature.

In the meantime, we tried to do it ourselves. We implemented this 

            <LocalizationProvider :language="language">

                <Editor

                    ref="editor"

                    :tools="tools"

                    :content-style="{

                        height: '160px',

                        width: '100%'

                    }"

                    :value="richTextValue"

                    @change="onChange"

                    @blur="onBlur"

                    >

                    <template v-slot:Pop2FormatBlockTool="{ props }">

                        <formatblock v-bind="props" />

                    </template>

                </Editor>

            </LocalizationProvider>

Of course, where, of course, we included this in the tools array:

        { render: "Pop2FormatBlockTool", props: this.pop2FormatBlockToolSettings },

Then we defined these variables in our Vue component, with default values

    kendoFormatBlockP: string = "P"

    kendoFormatBlockH1: string = "H1"

    kendoFormatBlockH2: string = "H2"

    kendoFormatBlockH3: string = "H3"

    kendoFormatBlockH4: string = "H4"

    kendoFormatBlockH5: string = "H5"

    kendoFormatBlockH6: string = "H6"

    pop2FormatBlockToolSettings: any = {

        ...EditorToolsSettings.formatBlock,

        items: [

            { text: this.kendoFormatBlockP, value: "p" },

            { text: this.kendoFormatBlockH1, value: "h1" },

            { text: this.kendoFormatBlockH2, value: "h2" },

            { text: this.kendoFormatBlockH3, value: "h3" },

            { text: this.kendoFormatBlockH4, value: "h4" },

            { text: this.kendoFormatBlockH5, value: "h5" },

            { text: this.kendoFormatBlockH6, value: "h6" }

        ]

    }

And we tried calling this method in beforeMounted() and mounted() to override the default values with the $t translations...

    initializeCustomTranslations(): void {

        this.kendoFormatBlockP = "Párrafo" // this.$t("telerik.editor.formatblock.p")

        this.kendoFormatBlockH1 = this.$t("telerik.editor.formatblock.h1")

        this.kendoFormatBlockH2 = this.$t("telerik.editor.formatblock.h2")

        this.kendoFormatBlockH3 = this.$t("telerik.editor.formatblock.h3")

        this.kendoFormatBlockH4 = this.$t("telerik.editor.formatblock.h4")

        this.kendoFormatBlockH5 = this.$t("telerik.editor.formatblock.h5")

        this.kendoFormatBlockH6 = this.$t("telerik.editor.formatblock.h6")

    }

But translation do not load and we lost the format (Heading 1 bigger than Heading 6).

Do you have any clue of what is going on, that prevents us from loading translations, and how to restore the format that we get in English? 

Thanks for the help

Lucía

[Vessy]

Hello, Lucía,

I am afraid that the values of the Format tool are coming directly from the tools configuration and are not localizable. The only possible way to update its values at the moment without changing the whole tool rendering, is either to update the built-in Schema of the Editor or to create your own one following the instructions from this help article:

• https://www.telerik.com/kendo-vue-ui/components/editor/schema/ 

Please, give this suggestion a try and let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik

[Lucía]

Hi Vessy, 

We managed to translate the options, by delaying the moment when we add the translations to the toolbar.

However we are struggling with the format of each element in the drop down.... and to have an automatic switch to "Paragraph" when the user starts typing. We already made the feature request so that all this work is not necessary when you implement the localization. Thanks!

[Vessy]

Hi, Lucía,

To be able to achieve the default look and feel of the format dropdown, you will need to re-implement the rendering of each option in the schema like suggested in my previous reply. Unfortunately, there is no other approach that we can offer you with the current implementation of the component.