@tntx/custom-syntax-editor

React自定义语法编辑器

Usage

安装

npm install @tntx/custom-syntax-editor

使用

import CustomEditor from "@tntx/custom-syntax-editor";

const keywords = [
	// groovy 关键词
	"as", "catch", "def", "enum", "for", "import", "new", "super", "throws", "while",
	"assert", "class", "default", "extends", "goto", "in", "null", "switch", "trait", "break",
	"const", "do", "false", "if", "instanceof", "package", "this", "true", "case", "continue", "else",
	"finally", "implements", "interface", "return", "throw", "try",
	// java 关键词
	"abstract", "transient", "int", "strictfp", "synchronized", "boolean", "char", "do",
	"final", "private", "short", "void", "double", "long", "protected", "static", "volatile",
	"byte", "float", "native", "public",
	// JDK 常用类
	"System", "Runtime", "String", "StringBuffer", "StringBuilder", "Date", "DateFormat",
	"SimpleDateFormat", "Calendar", "GregorianGalendar", "Math", "Integer", "Double", "Float",
	"Boolean", "List", "HashMap", "Map", "ArrayList", "Arrays", "Random", "Iterator"
];

const Demo = props => {
	
	const getCode = (code) => {
		console.log(code);
	};

    return (
       <CustomEditor
			defaultCode="" // 默认""
			readOnly={false} // 默认false
			height={400} // 默认300
			theme="night" // 默认day
			activeLine={true} // 默认true
			fold={true} // 默认true
			keywords={keywords} // 默认[]
			onChange={getCode}
		/>
    )
};

ReactDOM.render(
    <Demo />,
    document.getElementById('root')
);

编辑器效果

props参数：

| 参数 | 类型 | 默认值 | 是否必填 | 说明 | | :------: | :-----: | :----: | :------: | :----------: | | defaultCode | string | "" | 非必填 | 初始化赋值 | | readOnly | boolean | false | 非必填 | 设置只读 | | height | number | 300 | 非必填 | 编辑器高度 | | theme | string | "day" | 非必填 | 主题："day"和"night" | | activeLine | boolean | true | 非必填 | 当前行选中标识 | | indentUnit | number | 4 | 非必填 | tab按几个空格缩进 | | fold | boolean | true | 非必填 | 代码折叠 | | keywords | array | [] | 非必填 | 自定义提示关键词 | | onChange | function| 无 | 非必填 | 返回code | | Ctrl+F | 键盘事件 | - | 内置 | 自动格式化代码 |