Вставить текст в каретку на CodeMirror Textarea

Я работаю над редактором Python и хотел бы добавить функцию, чтобы вставить текст в позицию курсора в textarea в CodeMirror.

существует ряд изображений, которые можно щелкнуть. При нажатии кнопки alt атрибут этого изображения сохраняется, а затем, когда вы снова нажимаете внутри текстового поля, он копируется в вашу позицию мыши (демо-скрипка:https://jsfiddle.net/t0k7yp7n/1/)

вот скрипт для вставки текста часть:

selected = '';

$('.insert').click(function() {
    console.log($(this).attr('alt'));
    selected = $(this).attr('alt');
});

$('#textbox').click(function() {
    insertAtCaret('textbox', selected)
        // Clear the selection so it isn't copied repeatedly
    selected = '';
});

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
        "ff" : (document.selection ? "ie" : false));
    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        strPos = range.text.length;
    } else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, strPos);
    var back = (txtarea.value).substring(strPos, txtarea.value.length);
    txtarea.value = front + text + back;
    strPos = strPos + text.length;
    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        range.moveStart('character', strPos);
        range.moveEnd('character', 0);
        range.select();
    } else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

и вот текстовая часть CodeMirror:

var editor;

//<![CDATA[
window.onload = function() {
    editor = CodeMirror.fromTextArea(document.getElementById('textbox'), {
      mode: {
        name: "python",
        version: 2,
        singleLineStringErrors: false
      },
      lineNumbers: true,
      indentUnit: 4
    });
  } //]]>
<!DOCTYPE html>
<html>

<head>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
  <script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script>
  <script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
  <script src="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.js" type="text/javascript"></script>
  <script src="https://www.cs.princeton.edu/~dp6/CodeMirror/mode/python/python.js" type="text/javascript"></script>
  <script src="skulpt-codemirror.js" type="text/javascript"></script>
  <script src="load-save-py.js" type="text/javascript"></script>
  <script src="insert.js" type="text/javascript"></script>
  <link href="https://www.cs.princeton.edu/~dp6/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css">
  <title>Python Editor</title>
</head>

<body>
  Filename:
  <input id="inputFileNameToSaveAs">
  <button onclick="saveTextAsFile()">Save</button>
  <br>
  <input type="file" id="fileToLoad">
  <button onclick="loadFileAsText()">Open</button>
  <br>
  <br>
  <a href="#!">
    <img class="insert" alt="#1">
    <img class="insert" alt="#2">
    <img class="insert" alt="#3">
  </a>
  <br>
  <br>
  <textarea id="textbox" name="textbox"></textarea>
  <br>
  <button onclick="runit()" type="button">Run</button>
  <pre id="dynamicframe"></pre>
  <div id="canvas"></div>
</body>

</html>

когда я собрал их в один файл, хотя, когда я нажимаю на фотографии их alts не копировать в textarea. Почему это и как это исправить?

6
alt codemirror html javascript jquery

1 ответов

при использовании CodeMirror, ваш <textarea /> будет визуально заменен редактором, предоставленным CodeMirror и большей частью вашего кода относительно вашего <textarea /> не будет использоваться как есть.

что происходит на заднем плане, так это то, что ваш фактический <textarea /> сначала будет отмечен стилем display: none;. Не отображается, событие не привязано к <textarea /> будет на самом деле вызвать. Затем CodeMirror фактически добавит свой собственный код в DOM, чтобы отобразить новый редактор в позиции вашего <textarea /> который теперь не отображается.

например, HTML-код для недавно инициализированного редактора CodeMirror со строкой "Hello World", написанной в нем, будет выглядеть так:

<div class="CodeMirror-lines">
    <div style="position: relative; outline: none;">
        <div class="CodeMirror-measure">
            <div style="width: 50px; height: 50px; overflow-x: scroll;"></div>
        </div>
        <div class="CodeMirror-measure"></div>
        <div style="position: relative; z-index: 1;"></div>
        <div class="CodeMirror-cursors">
            <div class="CodeMirror-cursor" style="left: 74px; top: 0px; height: 13px;">&nbsp;</div>
        </div>
        <div class="CodeMirror-code">
            <div style="position: relative;">
                <div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;">
                    <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">1</div>
                </div><pre><span style="padding-right: 0.1px;"><span class="cm-variable">Hello</span> <span class="cm-variable">World</span></span></pre></div>
        </div>
    </div>
</div>

код <textarea /> больше не используется.

CodeMirror предоставляет изначально API программирования, который может использоваться для того, что вы хотите. В основном, необходимые шаги:

  • проверьте, когда редактор сфокусирован.
  • при фокусировке проверьте, изображение ранее было нажато, и если selected текст (тег alt изображения).
  • если да, вставить selected текст (alt изображения) в текущей позиции.

код JavaScript, связанный с этими шагами, будет выглядеть так:

// Listen to the editor focus events.
editor.on('focus', function () {
  // Only insert if a value has been previously selected.
  if (selected.length > 0) {
    // Fetch the current CodeMirror document.
    var doc = editor.getDoc();

    // Insert the text at the cursor position.
    doc.replaceSelection(selected);

    // Clear the selection so it isn't copied repeatedly.
    selected = '';
  }
});

вы можете проверить рабочий пример на это JSFiddle.

0