Ich habe ein Problem beim Erstellen eines Texteditors mit Unterstützung von bildbasierten Tags festgestellt. Es besteht die Notwendigkeit, diese Tags frei im Text zu verschieben, was durch dieses Problem unpraktisch wird.Inkonsistentes Bildbewegungsverhalten in quilljs mit react
Grundsätzlich, wenn ich anfange, ein Bild zu ziehen und es an der gewünschten Stelle abzusetzen, kann eines von zwei Ergebnissen passieren: A) es funktioniert wie beabsichtigt und B) wird das Bild bis zum Ende/Anfang des Satzes fallengelassen. Sie können das Verhalten in angehängten gif sehen.
Ich benutze react und Typoskript-Kombination zum Erstellen der Seite mit Pinole in einer Komponente eingefügt wird.
// 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;Und die Verwendung dieser Komponente in einer anderen Komponente ist nur
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}Ich habe versucht, den Texteditor nur contentEditable div zu ändern und das hat tadellos funktioniert, also sollte es nicht wegen etwas css gl sein jucken.
Hat jemand eine Idee von was könnte dies verursachen?
EDIT 6. Februar: Ich habe herausgefunden, dass dieses Problem nur in Chrome manifestiert, wie IE und MS Ränder dieses Problem nicht aufgetreten sind. Ich habe versucht, alle Erweiterungen auszuschalten, aber das Problem ist immer noch da. Der private Modus hat auch nicht geholfen.