I have a simple string here that has 8 lines.
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.
I'm using a for loop to count the lines and console it out.
$("#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()
})
In short when I click a button I want to replace a selection and insert it as a list.
Goal:
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.
How can I turn my string into an ordered list?
// 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>
Weave - http://kodeweave.sourceforge.net/editor/#1e2d096de915627ee15562260217e767
Took me awhile, but I figured it out!
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