2
イメージベースのタグをサポートするテキストエディタを作成するときに問題が発生しました。これらのタグをテキストの中で自由に動かす必要があり、この問題では実用的ではありません。イメージの動きが反応しているquilljsの動きが不一致
基本的に画像をドラッグして、目的の場所にドロップすると、次の2つの結果のいずれかが発生する可能性があります：A）意図したとおりに動作し、B）画像が文末/あなたは添付されたgifの動作を見ることができます。 Resulting behavior
私は、コンポーネントにクイルが挿入されたページを作成するために、反応とタイプスクリプトの組み合わせを使用しています。
// 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;そして、別のコンポーネントでは、このコンポーネントの使用は、私はちょうどのcontentEditableのdivにテキストエディタを変更しようとしただけで
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}で、それは完璧に働いたので、いくつかのCSSのglのためにすべきではありませんかゆみ。
これを引き起こしている可能性のある人は誰ですか？
EDIT 2月6日： IEおよびMSエッジは、この問題に遭遇していなかったように私は、この問題はChromeのみに明示されていること、を見出しました。私はすべての拡張機能を無効にしようとしましたが、問題はまだあります。プライベートモードも助けにはなりませんでした。