获取更新时的Codemirror文本框值

时间:2018-10-26 02:57:05

标签: javascript html codemirror

因此,我尝试使用Codemirror从网页获取输入,并且我希望每当文本输入更改时,它就更新Javascript中的值。目前,我正在执行此操作,但是用户必须按下按钮才能将输入发送到JS文件。

<!DOCTYPE html>
<html>
    <head>
        <title>CodeMirror</title>
    <script src="codemirror/lib/codemirror.js"></script>
    <link href="codemirror/lib/codemirror.css" rel="stylesheet"></link>
    <script src="codemirror/mode/xml/xml.js"></script>
    <script src="codemirror/addon/edit/closetag.js"></script>
    <link href="codemirror/theme/dracula.css" rel="stylesheet"></link>
    </head>
    <body>
        <textarea id="editor"><p>A paragraph</p></textarea>

    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
        mode: "xml",
        theme: "dracula",
        lineNumbers: true,
        autoCloseTags: true
      });

        function showCode() {
             var text = editor.getValue()
             console.log(text);
        }
    </script>

        <input id="clickMe" type="button" value="clickme" onclick="showCode();" />
    </body>
</html>

我将如何基本实现按钮的自动化,以便每当Codemirror文本区域的值更改时,JS脚本就会运行。

2 个答案:

答案 0 :(得分:1)

“更改”事件将告诉您什么时候发生了更改。

var index = this.selectedMessages.indexOf($event.target.getAttribute('name'));
this.selectedMessages.splice(index, 1);
const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {});
editor.on('change', (editor) => {
  const text = editor.doc.getValue()
  console.log(text);
});

答案 1 :(得分:0)

使用onchange的{​​{1}}属性:

<textarea>