如何为react代码镜像添加近括号和关闭标记
如何为react代码镜像添加近括号和关闭标记
提问于 2021-07-18 09:41:37
我在一个react项目中使用react codemirror2 2。我想添加功能，如自动括号关闭和自动标签关闭。有一个名为@codemirror/闭锁的npm包，但是我找不到任何文档来这样做。
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true
}}
/>这是我的反应元件。指定没有其他包(如@codemirror/闭锁)的方法。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-18 09:57:48
您可以将autoCloseBrackets: true添加到您的选项中，这样可以很好地工作。从医生那里
定义一个选项autoCloseBrackets，它将在输入时自动关闭括号和引号.
import 'codemirror/addon/edit/closebrackets'
// other parts of the code//
<ControlledEditor
onBeforeChange={handleChange}
value={value}
className="code-mirror-wrapper"
options={{
linerWrapping: true,
lint: true,
mode: language,
theme: 'material',
lineNumbers: true,
autoCloseBrackets: true,
}}
/>Stack Overflow用户
发布于 2022-05-19 07:03:12
This really works:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
<script>
function closeBrackets() {
myCodeMirror.execCommand("closeBrackets");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
autoCloseBrackets: true,
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68427855
复制相关文章
相似问题
腾讯云开发者
