React 媒体编辑器 - 如果点击占位符需要点击两次才能写入

Question

我在我的项目中使用 react-medium-editor v. ^1.8.1。我将媒体编辑器作为表单中的输入字段：

    <MediumEditor
      key={readOnly}
      id="oppgavetekst"
      value={(translation && translation.text[translate]) || ''}
      placeholder="Translate text..."
      disabled={translate === 'from' || readOnly}
      style={{minHeight: 350}}
      onChange={(text) => onChange({name: 'examText', value: text})}
    />

MediumEditor 组件如下所示：

class MediumEditor extends React.Component {
  static props = {
    id: PropTypes.string,
    value: PropTypes.string,
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    uniqueID: PropTypes.any,
    placeholder: PropTypes.string,
    style: PropTypes.object,
  };

  shouldComponentUpdate(nextProp) {
    if(nextProp.forcedUpdate !== this.props.forcedUpdate)
      return true;

    return false;
  }


  render() {
    const {id, value, onChange, disabled, placeholder, style, uniqueID, forcedUpdate, ...restProps} = this.props;
    return (
      <div style={{ position: 'relative', height: '100%' }} {...restProps}>
        {disabled && <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          cursor: 'not-allowed',
          zIndex: 1
        }} />}
        <Editor
          id={id}
          data-testid={`medium-editor-${id}`}
          options={{
            toolbar: {
              buttons: ['bold', 'italic', 'underline', 'subscript', 'superscript']
            },
            spellcheck: false,
            disableEditing: disabled,
            placeholder={text: placeholder || "Exam task..."}
          }}
          onChange={text => onChange(stripHtml(text) === '' ? '' : fixExcelPaste(text))}
          text={value}
          style={{
            ...style,
            background: disabled ? 'transparent' : 'white',
            borderColor: disabled ? 'grey' : '#FF9600',
            overflowY: 'auto',
            color: '#444F55',
          }}
        />
      </div>
    )
  }
}

export default MediumEditor;

我遇到的问题是，如果我单击占位符，我需要再单击一次才能在该字段中写入。如果我点击占位符周围的任何地方，我可以立即开始写作，但只有占位符所在的地方我需要点击两次。我该如何解决这个问题？

我曾尝试在此处创建一个 codesandbox，但出于某种原因，编辑器样式不起作用。

Answer 1

请将此添加到您的全局 css 文件，使您的占位符半透明：

.medium-editor-placeholder:after {
  pointer-events: none;
}

点击它会 select 它后面的元素。

如果您检查 chrome devtools 中的元素，您可以看到占位符元素遮盖了它后面的输入元素。

发件人：text selection on a element behind an absolute element

pointer-events: none 将样式应用于让您点击它的占位符元素。

React 媒体编辑器 - 如果点击占位符需要点击两次才能写入

React medium editor - need to click twice to be able to write if clicking on placeholder

javascript

reactjs

medium-editor