将字符添加到 Codemirror 中每行选择的多行选择答案

【问题标题】：Add character to multi-line selection in Codemirror on each line of selection将字符添加到 Codemirror 中每行选择的多行选择
【发布时间】：2018-04-04 05:01:33
【问题描述】：

当我选择以下文字时...

# Lorem ipsum dolor sit amet.

**Facere laudantium quod, omnis velit!**

*Molestias numquam exercitationem aliquid rerum.*

**Accusamus quae omnis temporibus molestias!**

*Sed excepturi libero cum a.*

我想在按下按钮时为该部分的每一行添加一个引号......

> # Lorem ipsum dolor sit amet.
> 
> **Facere laudantium quod, omnis velit!**
> 
> *Molestias numquam exercitationem aliquid rerum.*
> 
> **Accusamus quae omnis temporibus molestias!**
> 
> *Sed excepturi libero cum a.*

有谁知道如何在 Codemirror 中做到这一点？

// Initialize CodeMirror editor
var mdEditor = CodeMirror.fromTextArea(document.getElementById("mdEditor"), {
  mode: "text/x-markdown",
  theme: "default",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop: true,
  gutters: ["CodeMirror-linenumbers"],
  extraKeys: {
    "Enter": "newlineAndIndentContinueMarkdownList"
  }
})

$("[data-action=quote]").on("click", function() {
  var selected_text = mdEditor.getSelection()  // Need to grab the Active Selection
  console.log(selected_text)  // Active Selection

  mdEditor.replaceSelection("", mdEditor.getCursor())
  mdEditor.replaceRange("> " + selected_text, mdEditor.getCursor())
  mdEditor.focus()
})

@import url("http://codemirror.net/lib/codemirror.css");

html, body {
  padding: 0;
  margin: 0;
}

.CodeMirror {
  float: left;
  width: 100%;
}

<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/continuelist.js"></script>
<script src="http://codemirror.net/addon/mode/overlay.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/markdown/markdown.js"></script>
<script src="http://codemirror.net/mode/gfm/gfm.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-action="quote">Quote Selection</button>

<textarea id="mdEditor"># Lorem ipsum dolor sit amet.

**Facere laudantium quod, omnis velit!**

*Molestias numquam exercitationem aliquid rerum.*

**Accusamus quae omnis temporibus molestias!**

*Sed excepturi libero cum a.*</textarea>

【问题讨论】：

标签： javascript jquery codemirror

【解决方案1】：

一个相当粗略的（不支持多选，尾随空白）实现可能如下所示：

CodeMirror.commands.quoteSelection = function(cm) {
  var from = cm.getCursor("from").line, to = cm.getCursor("to").line
  for (var line = to; line >= from; line--)
    cm.replaceRange("> ", {line: line, ch: 0})
}

然后您可以调用editor.execCommand("quoteSelection") 来运行它。

【讨论】：

【解决方案2】：

我最终改用.replace()。

$("#quote").on("click", function() {
  var selected_text = mdEditor.getSelection()  // Need to grab the Active Selection

  mdEditor.replaceSelection("  > " + selected_text.replace(/\n/g,'\n  > '))
  mdEditor.focus()
})

回复有点晚，但我认为值得一提。

// Initialize CodeMirror editor
var mdEditor = CodeMirror.fromTextArea(document.getElementById("mdEditor"), {
  mode: "text/x-markdown",
  theme: "default",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop: true,
  gutters: ["CodeMirror-linenumbers"],
  extraKeys: {
    "Enter": "newlineAndIndentContinueMarkdownList"
  }
})

$("[data-action=quote]").on("click", function() {
  var selected_text = mdEditor.getSelection()  // Need to grab the Active Selection

  mdEditor.replaceSelection("  > " + selected_text.replace(/\n/g,'\n  > '))
  mdEditor.focus()
})

@import url("http://codemirror.net/lib/codemirror.css");

html, body {
  padding: 0;
  margin: 0;
}

.CodeMirror {
  float: left;
  width: 100%;
}

<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/continuelist.js"></script>
<script src="http://codemirror.net/addon/mode/overlay.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/markdown/markdown.js"></script>
<script src="http://codemirror.net/mode/gfm/gfm.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-action="quote">Quote Selection</button>

<textarea id="mdEditor"># Lorem ipsum dolor sit amet.

**Facere laudantium quod, omnis velit!**

*Molestias numquam exercitationem aliquid rerum.*

**Accusamus quae omnis temporibus molestias!**

*Sed excepturi libero cum a.*</textarea>

【讨论】：