如何为 React 代码镜像添加右括号和右标签

Question

我在 React 项目中使用 react-codemirror2。我想添加自动括号关闭和自动标记关闭等功能。有一个名为 @codemirror/closebrackets 的 npm 包，但我找不到任何相关文档。

        <ControlledEditor
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                linerWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true
            }}
        />

这是我的反应组件。指定是否有一种方法可以不使用 @codemirror/closebrackets.

等附加包

Answer 1

您可以将 autoCloseBrackets: true 添加到您的选项中，它会正常工作。 From the doc:

Defines an option autoCloseBrackets that will auto-close brackets and quotes when typed.

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,
            }}
        />

Answer 2

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>

如何为 React 代码镜像添加右括号和右标签

How to add close bracket and close tag for react code mirror

javascript

codemirror

reactjs

react-codemirror2