react-summernote 中的表格弹出框问题

Posted 2023-03-22

【中文标题】react-summernote 中的表格弹出框问题

【英文标题】：Table Popover issue in react-summernote

【发布时间】：2019-12-02 11:37:11

【问题描述】：

我在我的应用程序中使用 react-summernote 并具有以下配置。我想通过弹出功能实现表格添加、删除列和行功能。我添加了文档中给出的弹出框设置，但不知何故它没有反映表格的任何弹出框。下图将显示问题的更多详细信息

期望：

当前表格未显示任何在上图中标记为黄色的弹出框。

我正在使用 react-summernote: 2.0.0 & 我在反应编辑器选项中使用了弹出框配置

<ReactSummernote
className="rich_text_global"
value=this.props.value.toString()
onChange=this.props.onChange
options=
lang: 'en-EN',
height: 350,
insertTableMaxSize: 
col: 20,
row: 20
,
popover: 
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
,
dialogsInBody: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link']]

                    ]

                

                />

【参考方案1】：

table popover 不显示只是因为 react-summernote 的 js 文件中没有这样的代码来初始化和显示（react-summernote 的最新版本仍然依赖于 Summernote 版本 0.8.3，它没有完全支持这个功能）

为了有弹出框，你可以查看 react-summernote 的源代码，并使用 Summernote 0.8.12 或更高版本重建它