How to configure the editor to use color picker for ForeColor and BackColor

[Francis]

How do you configure the editor tool for foreColor and backColor to display color picker? Just as in this edit control?

[Vessy]

Hi, Francis,

You can achieve the target result by implementing custom tools containing ColorPicker for styling the fore/back color of the selected text. For example, you can have a similar implementation:

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

Regards,
Vessy
Progress Telerik

[Francis]

Getting multiple version error in ProseMirror script:

<template>
  <Editor
    :tools="tools"
    :default-content="content"
    :content-style="{
      height: '300px',
    }"
  >
    <template v-slot:MyBold="{ props }">
      <inlineformat v-bind="props" />
    </template>
    <template v-slot:MyItalic="{ props }">
      <inlineformat v-bind="props" />
    </template>
    <template v-slot:MyUnderline="{ props }">
      <inlineformat v-bind="props" />
    </template>
    <template v-slot:MyFontSizeTool="{ props }">
      <fontsize
        v-bind="props"
        :style="{
          width: '110px',
          ...props.style,
        }"
      />
    </template>
    <template v-slot:MyFontNameTool="{ props }">
      <fontname
        v-bind="props"
        :style="{
          width: '110px',
          ...props.style,
        }"
      />
    </template>
    <template v-slot:MyBackColor="{ props }">
      <CustomColorPicker v-bind="props" :settings="props.settings" />
    </template>
    <template v-slot:MyForeColor="{ props }">
      <CustomColorPicker v-bind="props" :settings="props.settings" />
    </template>
  </Editor>
</template>

<script>
import CustomColorPicker from './CustomColorPicker';
import {
  Editor,
  EditorToolsSettings,
  InlineFormat,
  FontName,
  FontSize,
  ApplyColor,
} from '@progress/kendo-vue-editor';
import content from './content-basic';

const customBoldSettings = {
  // Toggle the 'B' tag.
  mark: 'b',
  // Recognize the 'STRONG' tag also as Bold.
  altMarks: ['strong'],
  props: {
    title: 'My Custom Bold',
    icon: EditorToolsSettings.bold.props.icon,
  },
  messages: {},
};

const customItalicSettings = {
  // Toggle the 'I' tag.
  mark: 'i',
  // Recognize the 'EM' tag also as Bold.
  altMarks: ['em'],
  props: {
    title: 'My Custom Italic',
    icon: EditorToolsSettings.italic.props.icon,
  },
  messages: {},
};

const customUnderlineSettings = {
  // Toggle the 'U' tag.
  mark: 'u',
  props: {
    title: 'My Custom Underline',
    icon: EditorToolsSettings.underline.props.icon,
  },
  messages: {},
};

const fontSizeToolSettings = {
  ...EditorToolsSettings.fontSize,
  items: [
    {
      text: '10',
      value: '10pt',
    },
    {
      text: '12',
      value: '12pt',
    },
    {
      text: '14',
      value: '14pt',
    },
    {
      text: '18',
      value: '18pt',
    },
    {
      text: '22',
      value: '22pt',
    },
    {
      text: '36',
      value: '36pt',
    },
  ],
};

const fontNameToolSettings = {
  ...EditorToolsSettings.fontName,
  items: [
    {
      text: 'Noto Sans TC',
      value: 'Noto Sans TC, sans-serif',
    },
    {
      text: 'Impact',
      value: 'Impact, Charcoal, sans-serif',
    },
    {
      text: 'Arial',
      value: 'Arial, Helvetica, sans-serif',
    },
  ],
};
const applyColorSettings = {
  ...EditorToolsSettings.backColor,
};

const applyForColorSettings = {
  ...EditorToolsSettings.foreColor,
};

export default {
  components: {
    Editor,
    inlineformat: InlineFormat,
    fontsize: FontName,
    fontname: FontName,
    CustomColorPicker,
  },
  data() {
    return {
      content: content,
      tools: [
        [   
          { render: 'MyBold', props: customBoldSettings },
          { render: 'MyItalic', props: customItalicSettings },
          { render: 'MyUnderline', props: customUnderlineSettings },
          , "Strikethrough"
        ],
        ["Subscript", "Superscript"],
        ["AlignLeft", "AlignCenter", "AlighnRight", "AlignJustify"],
        ["Indent", "Outdent"],
        ["OrderedList", "UnorderedList"],
        "FormatBlock",
        ["Undo", "Redo"],
        ["Link", "Unlink", "InsertImage", "ViewHtml" ],
        ["InsertTable"],
        ["AddRowBefore", "AddRowAfter", "AddColumnBefore", "AddColumnAfter"],
        ["DeleteRow", "DeleteColumn", "DeleteTable"],
        ["MergeCells", "SplitCell"],
        { render: 'MyFontSizeTool', props: fontSizeToolSettings },
        { render: 'MyFontNameTool', props: fontNameToolSettings },
        { render: 'MyBackColor', props: applyColorSettings },
        { render: 'MyForeColor', props: applyForColorSettings },
      ],
    };
  },
};
</script>

Modified main.vue code above. In  my app it was giving "Uncaught RangeError: Duplicate use of selection JSON ID cell in index.js:178,717. 

With the above code, clicking enter at the end of the text shows:

[Vessy]

Hi, Francis,

This is a common issue that happens when different versions of ProseMirror packages are loaded. The error usually happens when the Kendo UI for Vue Editor examples are opened in the StackBlitz, CodeSandBox or an app where yarn has been used.

If you open an example in StackBlitz, download it and run it locally, you will see that it works as expected. It also works as expected in the Kendo UI for Vue website.

[Francis]

Thanks Vessy. I am attaching a tutorial project that is locally run and it throws duplicate JSON ID error I mentioned.

[Francis]

Further investigation revealed that the @progress/kendo-editor-common references the ProseMirror libraries and fails in the prosemirror-tables package. I removed anything related to the tables from the tool configuration; still fails with the duplicate JSON ID for cell. I created a fresh project with the initial steps in the how to get started page, then copied your code from the stackblitz link you provided, and it still fails at the same location. Only thing different is that my packages have latest versions.

[Francis]

Using kendo-editor-common@1.9.6 rendered as follows:

At least it renders something and the errors are different now:

 

[Vessy]

Hi, Francis,

Thanks a lot for the shared project.

The faced problem in it is caused due to the different `@progress/kendo-editor-common` versions used in the package.json file and in the dependencies of the Editor package. In order to avoid that you can either upgrade all versions to the latest ones, or just remove the  `@progress/kendo-editor-common` package from the dependencies of your project. The below steps allowed me to run the project with no errors, I am attaching it for reference as well:

• delete `@progress/kendo-editor-common` from the package.json file
• delete the package.lock and the node_modules
• trigger "npm install" to install the packages again

Can you give them a try and let me know if this resolves the issue at your end as well?

[Francis]

That worked!  Thanks Vessy!

[Vessy]

You are welcome, Francis :)