Получить значение текстового поля Codemirror при обновлении - PullRequest
Новая
       9

Получить значение текстового поля Codemirror при обновлении

0 голосов
/ 26 октября 2018

Поэтому я пытаюсь использовать 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 голосов
/ 26 октября 2018

Событие 'change' сообщит вам, когда что-то изменилось. 

const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {});
editor.on('change', (editor) => {
  const text = editor.doc.getValue()
  console.log(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.css" rel="stylesheet"></link>
<textarea id="editor"><p>A paragraph</p></textarea>
0 голосов
/ 26 октября 2018

Используйте атрибут onchange <textarea>: 

<textarea id="editor" onchange="showCode();"><p>A paragraph</p></textarea>
...