Question

我使用react-native-zss-rich-text-editor开发了Rich Text编辑器，但工具栏操作不起作用，谁知道如何修复它？谢谢。以下是代码：

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

在RichTextToolbar.js中定义了defaultActions：

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

这也被定义为此处的常量：

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

...在这里切换案例：

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;

但是行动不起作用，请帮忙，我会很感激。谢谢。我正在使用Github的这个库：

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

Answer 1

您无需在RichTextToolbar中设置默认操作。我使用它而不使用任何默认操作。希望这能帮到你

<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'}}
/>

Answer 2

您需要从react-native zss-rich-text-editor

导入'actions'

像这样：

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

然后，在RichTextToolBar中，您只需设置如下操作：

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

完整的操作列表位于：https://github.com/wix/react-native-zss-rich-text-editor/blob/master/src/const.js

反应原生zss富文本编辑器工具栏操作不起作用

2 个答案: