6
저는 Python 편집기를 사용하고 있으며 CodeMirror 텍스트 영역의 캐럿 위치에 텍스트를 삽입하는 기능을 추가하려고합니다.CodeMirror에서 캐럿에 텍스트 삽입 Textarea
클릭 할 수있는 일련의 그림이 있습니다. 클릭하면 해당 그림의 alt 속성이 저장되고 다시 텍스트 영역 내부를 클릭하면 마우스 위치로 복사됩니다 (데모 바이올린 : https://jsfiddle.net/t0k7yp7n/1/)
다음은 텍스트 삽입 부분에 대한 스크립트입니다. :
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>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 텍스트 영역 부분입니다
내가 하나의 파일에 함께 넣었을 때 그림을 클릭하면 alt이 텍스트 영역에 복사되지 않습니다. 왜 그런가요? 어떻게 수정합니까?
감사합니다. CodeMirror에 대한 다른 주요 질문이 있습니다. 답변을 원하시면 http://stackoverflow.com/questions/39075483/load-and-save-codemirror-textarea –
이 대답은 괜찮습니까? 나는 그것이 다른 경우에 한 번 살펴볼 것입니다. – HiDeo
예, 고마워요.다른 답변자가 약간의 문제를 겪고 있으므로 조사해 보니 정말 감사 할 것입니다. CodeMirror를 잘 사용하는 방법을 알고 계실 것입니다. –