Получить значение текстового поля 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.

Может быть, этот Пример JsFiddle Codemirror поможет? Он не показывает вам живое обновление, но показывает, как использовать редактируемый, что может быть полезно, если вы не хотите использовать свой собственный / другой метод для редактирования.

NewToJS 26.10.2018 05:02
1
1
1 099
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

<textarea id="editor" onchange="showCode();"><p>A paragraph</p></textarea>
Ответ принят как подходящий

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

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>

Именно то, что я искал. Спасибо!

YYY 26.10.2018 05:37

Другие вопросы по теме