1

我在我的项目中使用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;

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

我试图在这里创建一个代码框，但由于某种原因，编辑器样式不起作用。

4

1 回答 1

2

请通过将其添加到您的全局 css 文件中来使您的占位符半透明：

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

单击它将选择它后面的元素。

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

在此处输入图像描述

From：绝对元素后面的元素上的文本选择

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

于 2020-12-23T01:57:45.070 回答