Question

我这里有一个简单的字符串，有8行。

Lorem ipsum dolor sit amet.
Ut doloremque omnis quibusdam nam.
Ex voluptas sapiente est. Possimus!
Esse accusantium maxime perferendis, incidunt.
Non, et aliquid reiciendis pariatur?
Delectus facere odio quo tenetur?
Accusamus magni, nulla velit. Exercitationem!
Odit, quia. Qui, sequi, eius.

我正在使用for循环来计算行数并将其控制出来。

$("#list-ol").on("click", function() {
  var selected_text = mdEditor.getSelection()

  for(i = 0; i < selected_text.split("\n").length; i++) {
    count = i + 1
    console.log(count)
  }
  mdEditor.focus()
})

简而言之，当我点击一个按钮时，我想要替换一个选择并将其作为列表插入。

目标：

A list of stuff

  1. Lorem ipsum dolor sit amet.
  2. Ut doloremque omnis quibusdam nam.
  3. Ex voluptas sapiente est. Possimus!
  4. Esse accusantium maxime perferendis, incidunt.
  5. Non, et aliquid reiciendis pariatur?
  6. Delectus facere odio quo tenetur?
  7. Accusamus magni, nulla velit. Exercitationem!
  8. Odit, quia. Qui, sequi, eius.

如何将字符串转换为有序列表？

// 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"
  }
})

CodeMirror.commands.olSelection = function(cm) {
  var counter = 1
  var from = cm.getCursor("from").line, to = cm.getCursor("to").line
  for (var line = to; line >= from; line--)
    cm.replaceRange("  "+ counter++ +" ", {line: line, ch: 0})
    }
$("#list-ol").on("click", function() {
  mdEditor.execCommand("olSelection")
})

@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 id="list-ol">List my selection</button>

<textarea id="mdEditor">My custom list
Lorem ipsum dolor sit amet.
Ut doloremque omnis quibusdam nam.
Ex voluptas sapiente est. Possimus!
Esse accusantium maxime perferendis, incidunt.
Non, et aliquid reiciendis pariatur?
Delectus facere odio quo tenetur?
Accusamus magni, nulla velit. Exercitationem!
Odit, quia. Qui, sequi, eius.</textarea>

Answer 1

编织 - http://kodeweave.sourceforge.net/editor/#1e2d096de915627ee15562260217e767

我花了一段时间，但我想出来了！

var str = "Lorem ipsum dolor sit amet.<br>Ut doloremque omnis quibusdam nam.<br>Ex voluptas sapiente est. Possimus!<br>Esse accusantium maxime perferendis, incidunt.<br>Non, et aliquid reiciendis pariatur?<br>Delectus facere odio quo tenetur?<br>Accusamus magni, nulla velit. Exercitationem!<br>Odit, quia. Qui, sequi, eius."
var i, len, text;
for (i = 0, len = str.split("<br>").length, text = ""; i < len; i++) {
    text += i + 1 + ". " + str.split("<br>")[i] + "<br>"
}

document.body.innerHTML = text

打印字符串所具有的行数

1 个答案: