6
Я работаю над редактором Python и хотел бы добавить функцию для вставки текста в положение каретки в текстовое поле CodeMirror.Вставить текст в Caret on CodeMirror Textarea
Существует серия фотографий, которые можно щелкнуть. Когда один щелкают, атрибут этой картины 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 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 s не копируются в текстовое поле. Почему это и как я могу это исправить?
спасибо за это: У меня есть другой признанный вопрос о CodeMirror, если вы хотите ответить на него: http://stackoverflow.com/questions/39075483/load-and-save-codemirror-textarea –
Ответ на этот вопрос? Я посмотрю как можно скорее на другого, если это так. – HiDeo
да, спасибо.Я был бы очень благодарен, если бы вы просмотрели его, так как у другого ответчика возникли проблемы, и вы знаете, как хорошо использовать CodeMirror! –