Table of Contents
ボタン１つで選択範囲のテキストをHTMLタグやPukiWikiの書式で囲ったり挿入したりできるテキストエリアです。
以下のサンプルとコードはPukiWikiの書式を挿入するものになっていますが、surroundWithの引数を変えればHTMLタグで選択範囲を囲むようにもできます。
動作確認環境
- Google Chrome 51.0.2704.103
- Safari 9.1.1
サンプル
こちらで動作を確認できます。
コード
HTML（body内）
<body>
<div class="editButtons">
<button id="linkButton">[[リンク挿入]]</button>
<select id="fontSizeSelector">
<option>6</option>
<option>8</option>
<option>10</option>
<option>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
</select>
<button id="sizeButton">文字サイズ変更</button>
</div>
<textarea name="editArea" id="editArea" cols="50" rows="5">テストテキストエリアテストテキストテストテキストテストテキストテストテキストテストテキストテストテキスト
</textarea>
</body>
javascript
var editArea = document.getElementById("editArea");
var linkButton = document.getElementById("linkButton");
linkButton.addEventListener('click', function(e) {
surroundWith(editArea, "[[", "]]");
e.preventDefault();
});
var sizeButton = document.getElementById("sizeButton");
sizeButton.addEventListener('click', function(e) {
var size = fontSizeSelector.value;
surroundWith(editArea, "&size(" + size + "){", "};");
e.preventDefault();
});
// 引数(対象のDOM, 左側に挿入するテキスト, 右側に挿入するテキスト)
function surroundWith(target, left, right) {
var selectPosition = {};
if (window.getSelection()) {
// 選択箇所の開始位置と終了位置を取得
selectPosition.start = target.selectionStart;
selectPosition.end = target.selectionEnd;
} else {
alert("対応していないブラウザです。");
}
// テキストエリアの全文
var allTextOfTarget = target.value;
// 選択範囲
var selected = allTextOfTarget.slice(selectPosition.start, selectPosition.end);
// 選択範囲より前にある全てのテキスト
var before = allTextOfTarget.slice(0, selectPosition.start);
// 選択範囲より後にある全てのテキスト
var after = allTextOfTarget.slice(selectPosition.end);
if (selectPosition.start != selectPosition.end) {
target.value = before + left + selected + right + after;
} else {
target.value = before + left + right + after;
}
}
テキストエリア内のテキストを選択してからボタンを押すと、選択範囲が指定した文字列で囲われます。