HTML 当我使用 DevExtreme 时编辑器不可见 vue.js

Question

我正在为我的客户制作一个新的布告栏。 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>

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

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

Answer 1

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

如果您使用的是 > v20

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

您可以在以下位置看到它：https://js.devexpress.com/Documentation/Guide/UI_Components/HtmlEditor/Getting_Started_with_HtmlEditor/#Create_an_HtmlEditor

如果您使用的是 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.

您可以在以下位置看到它：https://js.devexpress.com/Documentation/19_2/ApiReference/UI_Widgets/dxHtmlEditor/

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

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

HTML 当我使用 DevExtreme 时编辑器不可见 vue.js

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

html-editor

devextreme

vue.js