是否可以让CodeMirror行支持markdown的copy-paste-hyperlink?

问题描述 投票:1回答:1

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;">
                                            &nbsp;</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行中实现此功能?

visual-studio-code jupyter-notebook markdown codemirror
1个回答
0
投票

我认为这是您的意思,当用户粘贴链接时,使其成为可单击的超链接吗?

在初始化时,禁用粘贴事件。当用户粘贴到.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>
© www.soinside.com 2019 - 2024. All rights reserved.