將文本添加到textarea並使用javascript標記

Question

單擊按鈕後，應將文本添加到textarea。但是如果我使用的是+=，它會在textarea的值的末尾添加文本。我希望在點擊按鈕後，文本會被添加到我正在寫的部分。我希望你明白這個問題:)

還有另外一個問題：在將文本添加到textarea之後，它應該選擇一部分添加的文本。像這樣： [b] boldText [/ b] - 這是添加的文本。現在腳本應該選擇'boldText'。

我不在本網站上使用jQuery！

嗯，這裏是迄今爲止（不是整個腳本）我的腳本：

(...) <script> 
function insertBold() { 
    document.form2.content.value += "[b]boldText[/b]"; 
} 
</script> (...) 
<div class="formatBtn" onClick="insertBold()"><b>B</b></div> 
<form name="form2> 
<textarea style="width:100%; height:300px; font:Arial, Helvetica, sans-serif !important;" type="text" placeholder="Inhalt" name="content"></textarea><br><br> 
</form> (...) 

Answer 1

，你可以做到以下幾點。這將文本添加到光標位置

您的HTML：

<textarea id="txt" rows="10" cols="30">There is some text here.</textarea> 

您的jQuery

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea> 
<input type="button" id="btn" value="OK" /> 

這裏是鏈接的jsfiddle http://jsfiddle.net/cb97z2fk/

Answer 2

你可以」不要使用textareas作爲富文本編輯器。您不能將某些文字設爲粗體，而不能使其他文字爲空這是全部或沒有。

但是，您可以添加文本並將其選中。我添加了兩個按鈕，一個添加文本並選擇它，另一個添加'[b]文本[/ b]'並選擇'文本'。

PURE JS - 的jsfiddle：http://jsfiddle.net/seadonk/x3wkkqh4/3/
JQUERY - 的jsfiddle：http://jsfiddle.net/seadonk/x3wkkqh4/

PURE JS

(function() { 
    var btn = document.getElementById('formatBtn'); 
    btn.onclick=function(){insertAndSelect();}; 
    var btn2 = document.getElementById('formatBtnBolded'); 
    btn2.onclick=function(){insertAndSelectBolded();}; 
})(); 

function insertAndSelect() { 
    var textarea = document.getElementById('content');  
    var texttoinsertvalue = document.getElementById('textToInsert').value; 
    var selectionStart = textarea.value.length; 
    textarea.value = textarea.value + texttoinsertvalue; 
    var selectionEnd = textarea.value.length; 
    selectRange(textarea,selectionStart, selectionEnd); 
} 

function insertAndSelectBolded() { 
    var textarea = document.getElementById('content');  
    var texttoinsertvalue = document.getElementById('textToInsert').value; 
    var selectionStart = textarea.value.length+3; 
    textarea.value = textarea.value + '[b]'+texttoinsertvalue+'[/b]'; 
    var selectionEnd = textarea.value.length - 4; 
    selectRange(textarea,selectionStart, selectionEnd); 
} 

function selectRange(e, start, end){  
    if (!e) return; 
    else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
    else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); 
    range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */ 
    else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; } 
} 

JQUERY

$().ready(function() { 
    $('#formatBtn').click(function() { 
     insertAndSelect(); 
    })  
    $('#formatBtnBolded').click(function() { 
     insertAndSelectBolded(); 
    }) 
}); 

function insertAndSelect() { 
    var textarea = $('#content'); 
    var selectionStart = textarea.val().length; 
    textarea.val(textarea.val() + $('#textToInsert').val()); 
    var selectionEnd = textarea.val().length; 
    textarea.selectRange(selectionStart, selectionEnd); 
} 

function insertAndSelectBolded() { 
    var textarea = $('#content'); 
    var selectionStart = textarea.val().length+3; 
    textarea.val(textarea.val() + '[b]'+$('#textToInsert').val()+'[/b]'); 
    var selectionEnd = textarea.val().length-4; 
    textarea.selectRange(selectionStart, selectionEnd); 
} 

//use this function to set the range. 
$.fn.selectRange = function(start, end) { 
    var e = document.getElementById($(this).attr('id')); 
    if (!e) return; 
    else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
    else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */ 
    else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; } 
};