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

Question

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

我正在使用 DxHtmlEditor（由 DevExtreme）制作 HTML EDITOR。我的代码像

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

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

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

Answer 1

首先你的项目中需要 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 是一个所见即所得的编辑器，允许您格式化文本和 视觉内容并以 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/