我遇到的问题是,这是非常糟糕的用户体验,因为为了添加格式,你必须点击一个按钮,文本区域似乎忘记了光标所在的位置。它可以很好的点击,但第二,第三等,它弄乱了。。我在想我该怎么解决这个问题。
function formatText(type) {
var textarea = $('#textarea');
var cursorPos = textarea.prop('selectionStart');
var cursorPosEnd = textarea.prop('selectionEnd');
var v = textarea.val();
var textBefore = v.substring(0, cursorPos );
var textSelected = v.substring( cursorPos, cursorPosEnd );
if(textSelected == "")
textSelected = "text here"
var textAfter = v.substring( cursorPosEnd, v.length );
textarea.val( textBefore + type + textSelected + type + textAfter );
}
#textarea {
width: 100%;
height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><textarea id="textarea">
</textarea></div>
<button onclick="formatText('#')">Strike</button> <!-- For strike through -->
<button onclick="formatText('_')">Italic</button> <!-- For italic -->
<button onclick="formatText('*')">Bold</button> <!-- For bold -->
