Question

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

# 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中如何做到这一点？

＆＃13;

// 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()
})

＆＃13;

@import url("http://codemirror.net/lib/codemirror.css");

html, body {
  padding: 0;
  margin: 0;
}

.CodeMirror {
  float: left;
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 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")来运行它。

Answer 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>

在每行选择的Codemirror中为多行选择添加字符

2 个答案: