0
ここには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>