我们如何定制react-native-cn-richtext-editor的工具栏以在其上添加按钮

Question

我现在使用react-native-cn-richtext-editor，在编辑器的工具栏上添加自定义按钮。因此，我们如何使用react-native-cn-richtext-editor在编辑器工具栏上添加按钮。如果有人可以执行此操作，或者是否有任何支持在其上添加自定义按钮的编辑器，请提供一些示例。您的帮助将不胜感激。提前致谢Pooja。

Answer 1

您可以如下提供自己的工具栏

<CNToolbar
  style={{
    height: 35,
  }}
  iconSetContainerStyle={{
    flexGrow: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center',
  }}
  size={30}
  iconSet={[
    {
      type: 'tool',
      iconArray: [{
        toolTypeText: 'image',
        iconComponent:
          <Text style={styles.toolbarButton}>
            image
                </Text>
      }]
    },
    {
      type: 'tool',
      iconArray: [{
        toolTypeText: 'bold',
        buttonTypes: 'style',
        iconComponent:
          <Text style={styles.toolbarButton}>
            bold
                </Text>
      }]
    },
    {
      type: 'seperator'
    },
    {
      type: 'tool',
      iconArray: [
        {
          toolTypeText: 'body',
          buttonTypes: 'tag',
          iconComponent:
            <Text style={styles.toolbarButton}>
              body
                    </Text>
        },
      ]
    },
    {
      type: 'tool',
      iconArray: [
        {
          toolTypeText: 'ul',
          buttonTypes: 'tag',
          iconComponent:
            <Text style={styles.toolbarButton}>
              ul
                    </Text>
        }
      ]
    },
    {
      type: 'tool',
      iconArray: [
        {
          toolTypeText: 'ol',
          buttonTypes: 'tag',
          iconComponent:
            <Text style={styles.toolbarButton}>
              ol
                    </Text>
        }
      ]
    },
  ]}
  selectedTag={this.state.selectedTag}
  selectedStyles={this.state.selectedStyles}
  onStyleKeyPress={this.onStyleKeyPress}
/>

有关更多详细信息，请检查react-native-cn-richtext-editor's GitHub page