2
이미지 기반 태그를 지원하는 텍스트 편집기를 만들 때 문제가 발생했습니다. 이러한 태그를 텍스트에서 자유롭게 이동해야 할 필요가 있으며,이 문제로 인해 실용적이지 않게되었습니다.반응이있는 quilljs에서 일관되지 않은 이미지 이동 동작
기본적으로 이미지를 드래그하여 원하는 위치에 놓으면 두 가지 결과 중 하나가 발생합니다. A) 의도 한대로 작동하고 B) 이미지가 문장의 끝/맨 처음으로 떨어집니다. 첨부 된 gif에서 동작을 볼 수 있습니다. Resulting behavior
저는 퀼이 구성 요소에 삽입 된 페이지를 만들기 위해 react와 typescript 조합을 사용하고 있습니다.
// 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;그리고 다른 구성 요소에서이 구성 요소의 사용은 단지
입니다 내가 텍스트 편집기를 변경하는 것을 시도했다// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}단지의 contentEditable 사업부와 그것은 완벽하게 작동했기 때문에 CSS로 인해서는 안됩니다. gl 가려움.
누군가이 문제를 일으킬 수있는 아이디어가 있습니까?
편집 2월 6일 : 나는 IE와 MS 에지이 문제가 발생하지 않았다으로이 문제가 단지 크롬에 명시되어 있는지 발견했다. 모든 확장 기능을 끄려 고했지만 여전히 문제가 남아 있습니다. 개인 모드도 도움이되지 않았습니다.