margox / braft-editor

美观易用的React富文本编辑器,基于draft-js开发
MIT License
4.6k stars 595 forks source link

BraftEditor.use 实现自定义的行内组件 entnty ,entnty 在输出的 html 中 onClick 事件不执行 #949

Open lindsay135 opened 2 years ago

lindsay135 commented 2 years ago

使用 BraftEditor.use 方法给富文本编辑器添加中间件,实现自定义的行内组件 entnty ,entnty 在输出的 html 中 onClick 事件不执行

在线代码及主要代码如下:

在线代码地址: https://codesandbox.io/s/youthful-rgb-rdmkv?file=/src/index.js:1741-1748

主要代码如下:

BraftEditor.use([
  {
    type: "entity",
    name: "AT",
    control: (props) => {
      return {
        key: "wxAT",
        type: "component",
        component: (
          <span onMouseDown={(e) => { e.stopPropagation() }}>
            <button>@</button>
          </span>
        )
      }
    },
    mutability: "IMMUTABLE",
    data: {
      text: '111'
    },
    component: (props) => {
      return (
        <span className="keyboard-item-wxat" style={{color: 'red'}}>
          {props.children}
        </span>
      );
    },
    **exporter: (entityObject, originalText) => {
      return <span style={{color: 'blue'}}>
        <span className="control-item button" onClick={() => alert(123)}>{originalText}</span>
        </span>
    }**
  };
])

富文本内容生成 html 预览时,期望效果是点击事件有反应

期望点击后有弹框弹出,实际效果是点击时没有弹框

11png
lindsay135 commented 2 years ago

希望大佬们能帮我解决下问题,感谢感谢感谢!!!