当我使用 DevExtreme vue.js 时，HTML EDITOR 不可见

如何解决当我使用 DevExtreme vue.js 时，HTML EDITOR 不可见

我正在为我的客户制作一个新的布告栏。 CRUD 运行良好，但问题是...

我正在使用 DxHtmlEditor（由 DevExtreme）制作 HTML 编辑器。我的代码就像

<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>

这个。我希望这段代码工作得非常顺利，但事实并非如此。一位同事说肯定是版本问题。但他和我不知道哪个依赖是。

请告诉我如何解决这个问题。我期待你的回复：）谢谢你，享受周末

解决方法

首先你需要在你的项目中使用 quill 或 devextreme-quill（取决于 devextreme-vue 的版本）：

如果您使用的是 > v20

HtmlEditor 使用 DevExtreme Quill 库。这个图书馆是将 DevExtreme 添加到应用程序时会自动安装。

您可以在：https://js.devexpress.com/Documentation/Guide/UI_Components/HtmlEditor/Getting_Started_with_HtmlEditor/#Create_an_HtmlEditor

如果你使用的是 devextreme-vue

HtmlEditor 是一个 WYSIWYG 编辑器，允许您格式化文本和可视化内容并以 HTML 或 Markdown 格式输出。 HtmlEditor 是建立在 Quill 之上并需要 Quill。

您可以在：https://js.devexpress.com/Documentation/19_2/ApiReference/UI_Widgets/dxHtmlEditor/

您可能遇到的另一个问题是：如果您使用低于 21 版的 devextreme-vue。DxItem 的 name 属性是 format-name。

您可以在以下位置看到示例：https://js.devexpress.com/Documentation/20_2/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/items/