custom-syntax-editor

custom-syntax-editor

自定义语法编辑器

Usage

安装

npm install custom-syntax-editor

使用

import CustomEditor from "custom-syntax-editor";

const defaultCode = "";
const getCode = (code) => {
    console.log(code);
}

<CustomEditor
    defaultCode={defaultCode}
    readOnly={false}
    height={400}
    theme="night"
    activeLine={true}
    fold={true}
    keywords={keywords}
    onChange={getCode}
/>

keywords 自定义关键词

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"
];

编辑器效果

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	键盘事件	-	非必填	自动格式化代码

License

MIT