在 CodeMirror 文本區域的插入符號處插入文本

Question

我正在使用 Python 編輯器，並希望添加一項功能以在 CodeMirror 文本區域的插入符號位置插入文本。

有一系列的圖片可以點擊。 單擊時，該圖片的alt屬性將被保存，然后當您再次在 textarea 內單擊時，它會被復制到您的鼠標位置（演示小提琴： 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 textarea 部分：

 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>

但是，當我將它們放在一個文件中時，當我單擊圖片時，它們的alt不會復制到文本區域。 這是為什么，我該如何解決？

Answer 1

使用 CodeMirror 時，您的<textarea />將在視覺上被 CodeMirror 提供的編輯器替換，並且與您的<textarea />相關的大部分代碼將無法按原樣使用。

背景中發生的事情是您實際的<textarea />將首先用樣式display: none;進行標記display: none; . 不顯示，綁定在<textarea />上的事件不會實際觸發。 然后，CodeMirror 實際上會將自己的代碼添加到 DOM 中，以在您現在未顯示的<textarea />位置顯示一個新的編輯器。

例如，新初始化的 CodeMirror 編輯器的 HTML 代碼，其中寫入了字符串“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上查看一個工作示例。

Answer 2

簡而言之，此代碼將用文本替換代碼鏡像當前選擇（或沒有任何選擇時的當前光標位置）：

codemirror.doc.replaceSelection('text to replace');

在 CodeMirror 文本區域的插入符號處插入文本

問題描述

2 個解決方案

解決方案1
2 已采納 2016-08-25 08:32:21

解決方案2
1 2020-03-19 20:53:36

在 CodeMirror 文本區域的插入符號處插入文本

問題描述

2 個解決方案

解決方案1 2 已采納 2016-08-25 08:32:21

解決方案2 1 2020-03-19 20:53:36

解決方案1
2 已采納 2016-08-25 08:32:21

解決方案2
1 2020-03-19 20:53:36