react native zss富文本编辑器工具栏操作不起作用答案

【问题标题】：react native zss rich text editor toolbar actions does not workreact native zss富文本编辑器工具栏操作不起作用
【发布时间】：2017-08-04 03:07:01
【问题描述】：

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

<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

【问题讨论】：

你弄明白了吗？介意分享你的答案吗？

标签： react-native toolbar rich-text-editor

【解决方案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'}}
/>

【讨论】：

【解决方案2】：

您需要从 react-native zss-rich-text-editor 导入“操作”

像这样：

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

【讨论】：