开发中遇到的插件

1、react-ace(个人比较推荐这款插件)

一种富文本编辑器，在开发者相关的论坛上经常见到，比如github上的代码展示。

github上的代码展示示例

除了可以对我们的代码进行展示外，也可以经过配置动态编辑。

具体配置可见官网链接：react-ace

2、Monaco Editor

也是一种富文本编辑器，是微软出品的一种富文本编辑器，对比vscode（我们经常在用的编辑器），它的前身是微软的一个叫Monaco Workbench的项目，而Monaco Editor就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码都是共用的，所以Monaco Editor和VSCode在编辑代码，交互及UI上几乎是一摸一样的。不同的是，两者的平台不一样，Monaco Editor基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，性能比较强大。

缺点：没有封装暴露接口，没有中文文档，建议使用 插件3：react Monaco Editor

具体配置可见官网链接：monaco-editor

3、react Monaco Editor

对Monaco Editor这款插件做的封装，使用起来方便

缺点：提供的接口很少，如果要做更多的配置，仍然需要看Monaco Editor的官方文档去配置。

简单的配置：

<MonacoEditor

                    language="json"

                    theme="github"

                    value={defaultCode}  //编辑器的默认内容

                    onChange={this.onChange}

                    editorDidMount={this.editorDidMount}

                    options={ {

                            renderLineHighlight: 'none',  //选中的该行会类似高亮的效果

                            scrollbar: { //滚动条的配置

                                useShadows: false,

                                vertical: "hidden",

                                verticalScrollbarSize: 0,

                                verticalSliderSize: 0

                            },

                            minimap: {  //小地图，可以参考VSCode右侧的代码缩略图

                                enabled: false

                            },

                            readOnly: isReadOnly,  //是否可以编辑

                            //automaticLayout: true

                        } }

                />

具体配置可见官网链接：react-monaco-editor

4、 handsontable

一款在线Excel表格的插件，功能很强大

具体配置可见官网链接：handsontable

简要配置：

           width: '100%', //表格的宽度

            height: 470, //表格的高度 设置了才会出现scroll

            className: "htCenter htMiddle", //垂直水平居中

            colWidths: 55, //每列的宽度

            rowHeights: 35, //每行的高度

            //fixedRowsTop: 2,     //固定两行excel的冻结

            //fixedColumnsLeft: 3, //固定两列  固定行列会影响表格排版

            mergeCells: true, //表示允许单元格合并

            manualColumnMove: false, //列可拖动

            manualRowMove: false, //行可拖动

            manualColumnResize: true, //列可拖拽 调大小

            manualRowResize: true, //行可拖拽 调大小

            autoColumnSize: false, //当值为true且列宽未设置时，自适应列大小

            columnSorting: false, // 排序

            contextMenu: true, //右键菜单

            copyable: true, // 允许键盘复制

            renderer: function(instance, td, row, col, prop, value, cellProperties) {

                // 渲染为text类型，可选的有TimeRenderer、PasswordRenderer等不同的类型

                Handsontable.renderers.TextRenderer.apply(this, arguments);

                // 判断条件

                if (row === 0 || row === 1 || row === 2) {

                    td.style.backgroundColor = '#e0ecff';

                // 此处可以单独渲染某行或某列 根据条件渲染 比如背景色 字体、颜色、粗细等等

                }

            },

            dropdownMenu: true,//头部是否显示menu

            contextMenu: {    //内容部分的menu 对功能汉化

                items: {

                    'row_above': {

                        name: '上方插入一行'

                    },

                    'row_below': {

                        name: '下方插入一行'

                    },

                    "col_left": {

                        name: '左方插入列'

                    },

                    "col_right": {

                        name: '右方插入列'

                    },

                    "remove_row": {

                        name: '删除行',

                    },

                    "remove_col": {

                        name: '删除列',

                    },

                    'separator': Handsontable.plugins.ContextMenu.SEPARATOR,

                    'clear_custom': {

                        name: '清除数据',

                        callback: function() {

                            this.clear();

                        }

                    }

                }

            }