2017-02-03 5 views
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のみに明示されていること、を見出しました。私はすべての拡張機能を無効にしようとしましたが、問題はまだあります。プライベートモードも助けにはなりませんでした。

答えて

0

調査の数日後、私は問題の原因を突き止めました。

シャドウDOMの作成中にReact 'steals'入力イベントが発生するため、QuillとReactの組み合わせは機能しません。基本的には、Quillによって作成されたcontenteditable divで自分の入力を処理しようとするため、いくつかのアクションが実行されず、奇妙な動作が発生します。そして、QuillはReact DOMの外でそれ自身でそれをしようとするからです。

私はこの単純なテストプロジェクトで、ページ上のどこにでも簡単な入力タグを追加することでQuillエディタが破られたことが証明されています。

可能な解決策は、反応クイルまたは他のコンポーネントコンテナを使用することですが、私はそれがうまく動作するように管理していないか、またはQuill to ReactをDOM互換性のある方法で組み込む自分自身を書くことはできません。

関連する問題