DropFownLists in the text editor do not do anything

[Evan]

Hello,

I am attempting to implement the Kendo Vue Editor for text editing. All of the tools in the toolbar work great, besides the drop down options. Specifically: font size, font name, font color, format, background.

When highlighting text, they do not update. When making a selection in the drop down, nothing happens, and no events fire.

I have all needed packages installed that are listed on the getting started page https://www.telerik.com/kendo-vue-ui/components/editor/get-started/

I have tried:

• both controlled and uncontrolled modes
• both div and iframe rendering
• Creating my own custom tool renderers for the drop downs

Here is the component:

<template>

  <Editor

    v-bind="$props"

    :tools="tools || defaultTools"

    :value="modelValue"

    @change="onChange"

  >

    <template #FontName="{ props: fontNameProps }">

      <FontName v-bind="fontNameProps" />

    </template>

  </Editor>

</template>

<script setup lang="ts">

import {

  Editor,

  type EditorChangeEvent,

  type EditorProps,

  EditorToolsSettings,

  FontName

} from '@progress/kendo-vue-editor'

interface EditorPropsExtended extends EditorProps {

  modelValue: string

}

defineProps<EditorPropsExtended>()

const emit = defineEmits(['update:modelValue'])

const availableFonts = [ 'Segoe UI', 'Arial', 'Calibri', 'Cambria', 'Tahoma', 'Times New Roman' ]

const customFontNameTool = {

  render: 'FontName',

  props: {

    ...EditorToolsSettings.fontName,

    commandName: 'FontName',

    items: availableFonts.map(font => ({ text: font, value: font, style: { fontFamily: font } }))

  }

}

const defaultTools = [

  [ 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript' ],

  [ 'AlignLeft', 'AlignCenter', 'AlignRight' ],

  'FontSize', customFontNameTool, 'FormatBlock', 'ForeColor', 'BackColor',

  [ 'Indent', 'Outdent' ],

  [ 'OrderedList', 'UnorderedList' ],

  [ 'Link', 'Unlink' ]

]

const onChange = (e: EditorChangeEvent) => {

  emit('update:modelValue', e.html)

}

</script>

Edit: Grammar, added component

[Evan]

It appears the change event is not firing at all when an option is selected in the drop down.

[Konstantin Dikov]

Hi Evan,

I created a simple example with controlled mode of the Editor and the onChange event fires as expected:

• https://stackblitz.com/edit/zweriy?file=src%2Fmain.vue

If further assistance is needed, please share an example reproducing the issue, so we can test and debug it locally.

 

Regards,
Konstantin Dikov
Progress Telerik