Как мы можем обрезать панель инструментов реакции-native-cn-richtext-editor, чтобы добавить на нее кнопку - PullRequest
0 голосов
/ 07 апреля 2020

Я использую реагировать-native-cn-richtext-editor, теперь я хочу добавить пользовательскую кнопку на панели инструментов редактора. Итак, как мы можем добавить кнопку cutom на панели инструментов редактора с помощьюact-native-cn-richtext-editor. Пожалуйста, приведите пример, если кто-нибудь может это сделать или есть какой-либо редактор, который поддерживает добавление пользовательских кнопок на него. Ваша помощь будет оценена. Заранее спасибо Пуджа.

1 Ответ

0 голосов
/ 07 апреля 2020

Вы можете предоставить свою собственную панель инструментов, как показано ниже

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

, для более подробной информации, пожалуйста, проверьте act-native-cn-richtext-editor на странице GitHub

...