HTML EDITOR is not visible when I'm using DevExtreme vue.js

Question

I'm making a new notice-board for my customer. CRUD is working very well BUT the problem is...

I'm using DxHtmlEditor(by DevExtreme) to make HTML EDITOR. my code like

<DxHtmlEditor
  ref="htmlEditor"
  height="600px"
  :on-value-changed="changeTest"
  :value="formData.content"
  :visible="true"
>
  <DxToolbar :multiline="isMultiline">
    <DxItem name="undo" />
    <DxItem name="redo" />
    <DxItem name="separator" />
    <DxItem
      :accepted-values="sizeValues"
      name="size"
    />
    <DxItem
      :accepted-values="fontValues"
      name="font"
    />
    <DxItem name="separator" />
    <DxItem name="bold" />
    <DxItem name="italic" />
    <DxItem name="strike" />
    <DxItem name="underline" />
    <DxItem name="separator" />
    <DxItem name="alignLeft" />
    <DxItem name="alignCenter" />
    <DxItem name="alignRight" />
    <DxItem name="alignJustify" />
    <DxItem name="separator" />
    <DxItem name="orderedList" />
    <DxItem name="bulletList" />
    <DxItem name="separator" />
    <DxItem
      :accepted-values="headerValues"
      name="header"
    />
    <DxItem name="separator" />
    <DxItem name="color" />
    <DxItem name="background" />
    <DxItem name="separator" />
    <DxItem name="link" />
    <DxItem name="image" />
    <DxItem name="separator" />
    <DxItem name="clear" />
    <DxItem name="codeBlock" />
    <DxItem name="blockquote" />
    <DxItem name="separator" />
    <DxItem name="insertTable" />
    <DxItem name="deleteTable" />
    <DxItem name="insertRowAbove" />
    <DxItem name="insertRowBelow" />
    <DxItem name="deleteRow" />
    <DxItem name="insertColumnLeft" />
    <DxItem name="insertColumnRight" />
    <DxItem name="deleteColumn" />
  </DxToolbar>
  <!-- <div v-html="formData.content" /> -->
</DxHtmlEditor>

this. I expected this code work very smooth, but it wasn't. one of my colleagues said it must be a version problem. but he and I have no idea which dependency is.

please let me know how can I solve this problem. I look forward to your reply :) Thank you and enjoy the weekends

Answer 1

First of all you need quill or devextreme-quill in your project (depends on the version of devextreme-vue):

If you are using > v20

The HtmlEditor uses the DevExtreme Quill library. This library is installed automatically when you add DevExtreme to your application.

You can see it in: https://js.devexpress.com/Documentation/Guide/UI_Components/HtmlEditor/Getting_Started_with_HtmlEditor/#Create_an_HtmlEditor

If you are using devextreme-vue < v19

HtmlEditor is a WYSIWYG editor that allows you to format textual and visual content and to output it in HTML or Markdown. HtmlEditor is built on top of and requires Quill.

You can see it in: https://js.devexpress.com/Documentation/19_2/ApiReference/UI_Widgets/dxHtmlEditor/

Another issue you may have is: If you are usign devextreme-vue below version 21. The name property of DxItem is format-name.

You can see an example in: https://js.devexpress.com/Documentation/20_2/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/items/