2017-08-04 4 views
0

Ich habe den Rich Text-Editor mit read-native-ZSS-Rich-Text-Editor entwickelt, aber die Symbolleiste Aktionen funktioniert nicht, wer weiß, wie man es repariert? Vielen Dank. Unten ist der Code:reagieren native zss reichen Texteditor Symbolleiste Aktionen funktioniert nicht

<RichTextToolbar 
getEditor={() => this.richtext} 
actions={defaultActions} // <= this actions does not work 
iconTint='black' 
selectedButtonStyle={{backgroundColor:'yellow'}} 
/> 

die defaultActions in RichTextToolbar.js definiert wurde:

const defaultActions = [ 
    actions.insertImage, 
    actions.setBold, 
    actions.setItalic, 
    actions.insertBulletsList, 
    actions.insertOrderedList, 
    actions.insertLink 
]; 

Diese auch als Konstanten an hier definiert wurde:

export const actions = { 
... 
setBold: 'bold', 
setItalic: 'italic', 
... 
insertImage: 'INST_IMAGE', 
... 
insertBulletsList: 'unorderedList', 
insertOrderedList: 'orderedList', 
insertLink: 'INST_LINK', 
... 
} 

... Schaltergehäuse hier:

switch(action) { 
case actions.setBold: 
case actions.setItalic: 
case actions.insertBulletsList: 
case actions.insertOrderedList: 
case actions.insertImage: 
    this.state.editor.prepareInsert(); 
    if(this.props.onPressAddImage) { 
    this.props.onPressAddImage(); 
    } 
break; 

Aber die Aktionen funktionieren nicht, bitte helfen und ich werde es zu schätzen wissen. Vielen Dank. Ich verwende diese Bibliothek aus dem Github:

https://github.com/wix/react-native-zss-rich-text-editor

+0

Haben Sie es herausgefunden? Verstand deine Antwort teilen? – chapeljuice

Antwort

1

Sie haben keine Standardaktion in RichTextToolbar einstellen müssen. Ich benutze dies, ohne eine Standardaktion zu verwenden. Hoffe, dass dies helfen Ihnen

<RichTextEditor 
    ref={(r)=>this.richtext = r} 
    style={{ 
     alignItems:'center', 
     justifyContent: 'center', 
     backgroundColor: 'transparent', 
     width:screen.width/100*80, 
     height:screen.height/100*24, 
    }} 
    contentPlaceholder={'Type your post here...'} 
    hiddenTitle={true} 
    initialContentHTML={''} 
    editorInitializedCallback={() => this.onEditorInitialized()} 
/> 
<RichTextToolbar 
    getEditor={() => this.richtext} 
    onPressAddImage={()=>{ 
     this.uploadImage(); 
    }} 
    iconTint='black' 
    selectedButtonStyle={{backgroundColor:'#51671d'}} 
/> 
0

Sie müssen 'Aktionen' importieren aus reagieren-native ZSS-Rich-Text-Editor

So:

import {RichTextEditor, RichTextToolbar, actions} from 'react-native-zss-rich-text-editor'; 

Dann in Ihrem RichTextToolBar, Sie gerade eingestellten Aktionen wie folgt aus:

actions={ 
       [ 
       actions.insertImage, 
       actions.setBold, 
       actions.setItalic, 
       actions.insertBulletsList, 
       ] 
      } 

Die komplette Liste der Aktionen ist hier: https://github.com/wix/react-native-zss-rich-text-editor/blob/master/src/const.js

Verwandte Themen