Question

我在制作支持基于图像的标签的文本编辑器时遇到了问题。需要在文本中自由地移动这些标签，这在这个问题上是不切实际的。

基本上，当我开始拖动图像，然后将其放在所需位置时，可能会发生以下两种结果之一：A）它按预期工作; B）图像被放到句子的结尾/开头。你可以看到附加的gif中的行为。 Resulting behavior

我使用react和typescript组合创建了一个插入组件中的quill的页面。

＆＃13;

// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';

import { TextEditorState, TextEditorProps } from '../@types';
import { generateDelta } from '../@utils/generateDelta';

const formats = [
  'image'
];

class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
  constructor(props: TextEditorProps) {
    super(props);
    this.state = {
      Editor: undefined
    }
  }

  componentDidMount() {
    const self = this;
    this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
    
  }

  changeText(text: string) {
    if(typeof(this.state.Editor) !== 'undefined') {
      this.state.Editor.setContents(generateDelta(text), 'api');
    }
  }

  render() {
    return (
      <div id="editor-container"></div>
    );
  }
}

export default TextEditor;

＆＃13;

在另一个组件中使用此组件只是

＆＃13;

// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';

...

onUpdate(text: string) {
  this.refs.targetEditor.changeText(text);
}

...
render() {
  return (
    ...
    <TextEditor
      ref={'targetEditor'}
    />
    ...
  )
}

＆＃13;

我试图将文本编辑器更改为contentEditable div并且运行完美，所以它不应该是因为某些css故障。

有没有人知道可能导致这种情况的原因？

2月6日编辑：我发现，这个问题仅在Chrome中出现，因为IE和MS Edge没有遇到此问题。我试图关闭所有扩展，但问题仍然存在。私人模式也没有帮助。

Answer 1

经过几天的研究，我发现了造成这个问题的原因。

Quill和React的组合不会起作用，因为React＆＃39;窃取＆＃39;输入事件，同时创建shadow DOM。基本上，因为它试图在Quill创建的contenteditable div中处理我的输入，它会导致一些动作不会触发，从而导致奇怪的行为。而且因为Quill试图在React DOM之外单独完成它。

我在我的简单测试项目中证明了这一点，在页面的任何地方添加一个简单的输入标记会破坏Quill编辑器。

可能的解决方案是使用react-quill或其他一些组件容器，但是我还没有设法让它成功运行，或者自己写一些，这会将Quill以与DOM兼容的方式包含在React中。 / p>

反应

1 个答案: