admin 管理员组文章数量: 1086019
On my text area with codemirror I am trying to be able to select/ highlight text and then be able to click on my bold button and should wrap the bold tags around it.
I have looked at
SO Question 1 , SO Question 2
But does not seem to work with code mirror.
My Question is: With codemirror How could I grab the selected text and then make sure when I click on the bold button it wraps the text correctly?
Codepen Code View
Codepen Full View
Script
var editor = document.getElementById('text-editor');
var string = grabed_text();
$("#text-editor").each(function (i) {
editor = CodeMirror.fromTextArea(this, {
lineNumbers: true,
mode: 'html'
});
$('button').click(function(){
var val = $(this).data('val');
switch(val){
case 'bold': editor.replaceSelection('<b>' + string + '</b>');
break;
}
});
});
function grabed_text() {
}
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default" onLoad="text_editor();">
<div class="panel-heading">
<button type="button" data-val="bold" class="btn btn-default">Bold</button>
</div>
<div class="panel-body">
<textarea id="text-editor" name="text-editor" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="question-iframe"></div>
</div>
</div>
</div>
On my text area with codemirror I am trying to be able to select/ highlight text and then be able to click on my bold button and should wrap the bold tags around it.
I have looked at
SO Question 1 , SO Question 2
But does not seem to work with code mirror.
My Question is: With codemirror How could I grab the selected text and then make sure when I click on the bold button it wraps the text correctly?
Codepen Code View
Codepen Full View
Script
var editor = document.getElementById('text-editor');
var string = grabed_text();
$("#text-editor").each(function (i) {
editor = CodeMirror.fromTextArea(this, {
lineNumbers: true,
mode: 'html'
});
$('button').click(function(){
var val = $(this).data('val');
switch(val){
case 'bold': editor.replaceSelection('<b>' + string + '</b>');
break;
}
});
});
function grabed_text() {
}
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-default" onLoad="text_editor();">
<div class="panel-heading">
<button type="button" data-val="bold" class="btn btn-default">Bold</button>
</div>
<div class="panel-body">
<textarea id="text-editor" name="text-editor" class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="question-iframe"></div>
</div>
</div>
</div>
1 Answer
Reset to default 8Issue in your code is in the switch case where you're handling bold button.
case 'bold':
editor.replaceSelection('<b>' + string + '</b>');
break;
Here you're replacing the current selection by wrapping <b> tags around string variable but it's not defined anywhere. Ideally it should reflect the current selection from your editor. So I suggest you change your code like below.
// inside your click handler
var val = $(this).data('val');
var string = editor.getSelection();
switch(val){
case 'bold': {
editor.replaceSelection('<b>' + string + '</b>');
break;
}
}
Here's a Pen with the above changes.
本文标签： javascriptGet selectedhighlighted text with code mirror from text area not workingStack Overflow
版权声明：本文标题：javascript - Get selectedhighlighted text with code mirror from text area not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744027637a2520917.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论