我直接用的基于react的继承依赖,也可以用官网的。
npm install @monaco-editor/react
npm install monaco-editor
import Editor from '@monaco-editor/react';
interface Props {
value?: string | undefined;
changeValue?: (val: string | undefined) => void;
height?: number;
isREadOnly?: boolean;
}
const GraphEditor = ({ value, height, changeValue, isREadOnly }: Props) => {
return (
{
if (changeValue) changeValue(value);
}}
options={{
theme: 'vs', // 编辑器主题颜色
folding: true, // 是否折叠
foldingHighlight: true, // 折叠等高线
foldingStrategy: 'indentation', // 折叠方式 auto | indentation
showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
disableLayerHinting: true, // 等宽优化
emptySelectionClipboard: false, // 空选择剪切板
selectionClipboard: false, // 选择剪切板
automaticLayout: true, // 自动布局
codeLens: false, // 代码镜头
scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
colorDecorators: true, // 颜色装饰器
accessibilitySupport: 'off', // 辅助功能支持 "auto" | "off" | "on"
lineNumbers: 'on', // 行号 取值: "on" | "off" | "relative" | "interval" | function
lineNumbersMinChars: 5, // 行号最小字符 number
readOnly: isREadOnly, //是否只读 取值 true | false
}}
/>
);
};
export default GraphEditor;
在其他组件使用直接引入组件就好
获取在线编辑的信息 : 在处理数据时候,拿传入的value。在onchange里面也能获取到
eg: 右侧可拖拽左侧文件夹的一个测试小demo
import { Input, Popconfirm, Popover, Tree } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; import styles from './index.less'; // import {debounce} from 'lodash' // import { useDebounceFn } from '@ant-design/pro-components'; import GraphEditor from '@/components/GraphEditor/editorReact'; import { CloseCircleOutlined, DragOutlined, FolderAddOutlined, MoreOutlined, PlusOutlined, SearchOutlined, } from '@ant-design/icons'; const FuwuDemo = () => { const { DirectoryTree } = Tree; const [isDrap, setIsDrap] = useState
(false); // 是否在拖拽 const [dataSetHeight, setDatasetHeight] = useState (); // 高度 const [isHover, setIsHover] = useState (false); // 是否悬浮 const [textTitle, setTextTitle] = useState (); // 切换面板内容 const [changeValue, setChanneValue] = useState (''); // 搜索内容 const [selectKey, setSelectKey] = useState ([]); // 文件展开key const [defauSelectKey, setDefauSelectKey] = useState ([]); // 点击清空搜索返回之前的状态 const [dragMask] = useState (() => { const newMask = document.createElement('div'); newMask.className = styles.dragMask; newMask.style.display = 'none'; document.body.append(newMask); return newMask; }); const [editIcon, setEditIcon] = useState ({}); const [isEdit, setIsEdit] = useState ({}); const treeData = [ { title: 'parent 0', key: '0-0', children: [ { title: 'leaf 0-0', key: '0-0-0', isLeaf: true }, { title: 'leaf 0-1', key: '0-0-1', isLeaf: true }, { title: '嗨啊嗨', key: '0-0-2', isLeaf: true }, ], }, { title: 'parent 1', key: '0-1', children: [ { title: 'leaf 1-0', key: '0-1-0', isLeaf: true }, { title: 'leaf 1-1', key: '0-1-1', isLeaf: true }, ], }, ]; const onSelect = (keys: React.Key[], info: any) => { setTextTitle(info); if (!info?.node?.children) { return; } }; useEffect(() => { const [min, max] = [10, 400]; const onMouseMove = (e: MouseEvent) => { if (isDrap) { const target = document.querySelector('.bbBox'); // 获取dom实例 if (target) { let panelHeight = e.pageY - target.getBoundingClientRect().top; if (panelHeight < min) { panelHeight = min; } if (panelHeight > max) { panelHeight = max; } setDatasetHeight(panelHeight); } } }; const onMouseUp = () => { setIsDrap(false); dragMask.style.display = 'none'; }; document.body.addEventListener('mousemove', onMouseMove); document.body.addEventListener('mouseup', onMouseUp); return () => { document.body.removeEventListener('mousemove', onMouseMove); document.body.removeEventListener('mouseup', onMouseUp); }; }, [isDrap, setIsDrap]); const aaas = () => { setIsDrap(true); dragMask.style.display = 'block'; }; const deleteEdit = (e: any, nodeData: any) => { e.stopPropagation(); console.log(nodeData, 'nodeData'); }; const content = useCallback((nodeData: any) => { return ( { e.stopPropagation(); }} className={styles.exitButtonBox} >); }, []); const editEnter = (e: any, nodeData: any) => { // 编辑操作调用接口 console.log(e.target.value, '11111value'); console.log(nodeData, 'nodeData22222'); }; const testfun = (str: string, key: string) => { // 搜索富文本替换 if (!str?.includes(key)) { return; } let reg = new RegExp(key, 'g'); let newst = str.replace(reg, '' + key + ''); return newst; }; const childrenRender = useCallback( (nodeData: any) => { const xrarr = testfun(nodeData?.title, changeValue); return ({ deleteEdit(e, nodeData); }} title={() => { return ( ); }} >{nodeData?.children ? '确认删除这个文件夹吗' : '你确定要删除吗?'}
{nodeData?.children ? ({nodeData?.children?.length ? '删除后,该文件夹下的查询也将删除,不可恢复。' : '删除后,该文件夹不可恢复。'}) : null}删除
{ e.stopPropagation(); setIsEdit(nodeData); }} style={{ marginBottom: '-1px' }} > 重命名
{ setEditIcon(nodeData); }} onMouseLeave={() => { setEditIcon({}); }} > {isEdit?.key === nodeData?.key ? ( { e.stopPropagation(); }} onBlur={() => { setIsEdit({}); }} onPressEnter={(e: any) => { editEnter(e, nodeData); }} ref={function (input) { if (input !== null) { input.focus(); } }} /> ) : ( )} {editIcon?.key === nodeData?.key ? (); }, [changeValue, editIcon, isEdit], ); const onExpand = (expandedKeys: any) => { setSelectKey(expandedKeys); setDefauSelectKey(expandedKeys); }; const getTreeParents = ( data: any, changeValues: string, parentKey: string[] = [], ) => { data.forEach((item: any) => { if (item.children && item.children.length) { const hildrenType = item?.children?.find((itType: any) => { return itType?.title?.includes(changeValues); }); if (hildrenType) { parentKey.push(item?.key); } selectKey?.forEach((keyItem) => { if (item?.title?.includes(changeValues) && keyItem === item?.key) { parentKey.push(item?.key); } }); const temp = getTreeParents(item.children, changeValues); if (temp.length) { parentKey.push(...temp); } } }); return parentKey; }; return () : null}{ e.stopPropagation(); }} title="新建查询" /> { e.stopPropagation(); }} />
); }; export default FuwuDemo;开发调试} placeholder="请输入关键词搜索" onChange={(e) => { setChanneValue(e.target.value); if (!e.target.value) { return; } const parentKey = getTreeParents(treeData, e.target.value); setSelectKey(Array.from(new Set(parentKey))); }} allowClear={{ clearIcon: ({ setSelectKey(defauSelectKey); }} /> ), }} /> { aaas(); }} onMouseMove={() => { setIsHover(true); }} onMouseLeave={() => { setIsHover(false); }} > {isHover || isDrap ? () : null}