添加一个自定义div，但是这个div 设置 contentEditable = true 就报错

[yangzai316]

• 添加一个自定义div，但是这个div 设置 contentEditable = true 就报错，代码如下：

import React, { useState, useEffect } from "react";

import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { h } from "snabbdom";
import { Boot, SlateTransforms } from "@wangeditor/editor";

import "@wangeditor/editor/dist/css/style.css";
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const E = () => {
  const [editor, setEditor] = useState(null);
  const [html, setHtml] = useState("");

  useEffect(() => {
    Boot.registerRenderElem({
      type: "demo",
      renderElem: renderDemo,
    });
    Boot.registerElemToHtml({
      type: "demo",
      elemToHtml: demoToHtml,
    });
    Boot.registerParseElemHtml({
      selector: 'div[data-w-e-type="demo"]',
      parseElemHtml: parseDemoHtml,
    });
    if (editor != null) {
    }
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  const addPoi = () => {
    SlateTransforms.insertNodes(editor, [
      demoResume,
      { type: "paragraph", children: [{ text: "" }] },
    ]);
  };
  return (
    <>
      <button
        onClick={() => {
          addPoi();
        }}
      >
        add
      </button>
      <div style={{ margin: "20px", border: "1px solid #ccc" }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: "1px solid #ccc" }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: "500px" }}
        />
      </div>
      <div style={{ marginTop: "15px" }}>{html}</div>
    </>
  );
};

export default E;
const demoResume = {
  type: "demo",
  content: "我是自定义节点demo",
  link: "https://www.baidu.com",
  children: [{ text: "" }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
};

const renderDemo = (elem, children, editor) => {
  const { content = "", link = "" } = elem;

  return h(
    "div",
    {
      props: { contentEditable: false },
      style: {
        width: "200px",
        height: "80px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#e8e8e8",
        borderRadius: "8px",
      },
      on: {
        click() {
          console.log("clicked", link);
        },
      },
    },
    [content]
  );
};

const demoToHtml = (elem, childrenHtml) => {
  const { link = "", content = "" } = elem;

  const html = `<div
          data-w-e-type="demo"
          data-w-e-is-void
          data-w-e-is-inline
          data-link="${link}"
          data-content="${content}"
      >${content}</div>`;

  return html;
};

const parseDemoHtml = (domElem, children, editor) => {
  const link = domElem.getAttribute("data-link") || "";
  const content = domElem.getAttribute("data-content") || "";

  const myResume = {
    type: "demo",
    link,
    content,
    children: [{ text: "" }],
  };

  return myResume;
};

点击这个div 时报错

报错如下：

[cycleccc]

对一个 元素 设置 contentEditable 为 true 在需要点击设置这个元素时是会报错的，wagneditor 底层会判断如何点击或操作的这个dom设置了 不能edit，就抛出错误。