Jupyter笔记本电脑的电池是CodeMirror-lines(如果需要,请更正)。如果您不熟悉jupyter笔记本,请检查link。
这里是空白的降价单元格的代码。
<div class="cell text_cell unrendered unselected" tabindex="2">
<div class="prompt input_prompt"></div>
<div class="inner_cell">
<div class="ctb_hideshow">
<div class="celltoolbar"></div>
</div>
<div class="input_area" aria-label="Edit Markup Text here">
<div class="CodeMirror cm-s-default CodeMirror-wrap">
<div
style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 5.59999px; left: 5.6px;">
<textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea>
</div>
<div class="CodeMirror-vscrollbar" cm-not-content="true">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" cm-not-content="true">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer"
style="margin-left: 0px; margin-bottom: -12px; border-right-width: 18px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure"></div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 5.6px; top: 0px; height: 16.8px;">
</div>
</div>
<div class="CodeMirror-code" role="presentation">
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
<div
style="position: absolute; height: 18px; width: 1px; border-bottom: 0px solid transparent; top: 28px;">
</div>
<div class="CodeMirror-gutters" style="display: none; height: 46px;"></div>
</div>
</div>
</div>
<div class="text_cell_render rendered_html" tabindex="-1">
<p>Type <em>Markdown</em> and LaTeX: <span class="MathJax_Preview" style="color: inherit;"><span
class="MJXp-math" id="MJXp-Span-1"><span class="MJXp-msubsup" id="MJXp-Span-2"><span
class="MJXp-mi MJXp-italic" id="MJXp-Span-3" style="margin-right: 0.05em;">α</span><span
class="MJXp-mn MJXp-script" id="MJXp-Span-4"
style="vertical-align: 0.5em;">2</span></span></span></span>
<script type="math/tex" id="MathJax-Element-1">\alpha^2</script>
</p>
</div>
</div>
</div>
在VS Code中编辑降价,复制URL并粘贴到文本上会使文本成为降价链接/超链接。
是否可以在CodeMirror行中实现此功能?
我认为这是您的意思,当用户粘贴链接时,使其成为可单击的超链接吗?
在初始化时,禁用粘贴事件。当用户粘贴到.CodeMirror
内时,检查剪贴板内容是否以http://
或https://
开头,如果是,则创建一个Codemirror小部件超链接,否则我们将插入找到的剪贴板内容。
我发现的唯一问题是您不能一个接一个地粘贴链接...
$(function() {
var editorOptions = {
autoRefresh: true,
firstLineNumber: 1,
lineNumbers: true,
smartIndent: true,
lineWrapping: true,
indentWithTabs: true,
refresh: true,
mode: 'javascript'
};
$('.content').each(function() {
var self = $(this);
var editor = CodeMirror.fromTextArea(self.find(".editor")[0], editorOptions);
self[0].editor = editor;
editor.save();
editor.on("beforeChange", function(_, change) {
if (change.origin == "paste") change.cancel()
});
});
var newText;
$(document).on({
paste: function(e) {
e.preventDefault();
var content = $(this).closest('.content');
var editor = content[0].editor;
navigator.clipboard.readText().then(text => {
if (text.match(/^(http:\/\/|https:\/\/)(.*)/g)) {
newText = text;
var el = $('<a class="markdown-link" href="newtext" target="_blank">' + newText + '</a>')[0];
var line = editor.getCursor().line;
var ch = editor.getCursor().ch;
var isEmptyLine = editor.getLine(line).trim() === "";
if (isEmptyLine) {
// if line is empty we insert the widget here
editor.replaceRange(' ', {
line
});
} else if (ch === 0) {
// if character position is zero, don't do anything
editor.replaceRange(' ' + "\n", pos);
} else {
// if line has content, insert widget on new line
editor.replaceRange("\n" + ' ', {
line
});
line++;
}
var widget = editor.markText({
line,
ch: 0
}, {
line,
ch: 1
}, {
replacedWith: el
});
editor.focus();
} else {
document.execCommand('insertHTML', false, text);
}
});
}
}, '.CodeMirror');
});
.content {
width: 450px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.CodeMirror {
height: fit-content !important;
border-radius: 5px;
border: 1px solid #ddd;
}
.CodeMirror-line {
line-height: 1.5 !important;
}
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
opacity: 0;
pointer-events: none;
}
.markdown-link {
background: #e8f0fe;
cursor: pointer;
padding: 2px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" />
<div class="content">
try inserting text that begins with "http://" or "https://"
<textarea class="editor" style="display: none;">var str = "Hello,World!";
console.log("hello, there!");
$(document).on('click', '.btn', function() {
$(this).toggleClass('active');
});</textarea>
</div>