ごく最近、別のプロジェクトに取り組んでいるときに、単純なbbコードエディターが必要になりました。
少し考えてグーグルで検索した後、私は自分で書いた。おそらくどこも簡単ではないだろう...エディターは動作するために接続されたJqueryライブラリを必要とする。
私はここにそれを公開します、誰かが役に立つかもしれません。
エディターのHTMLコードは次のとおりです。
< div class ="bb_bar" >
< a href ="#" alt ="b" > </ a >
< a href ="#" alt ="i" > </ a >
< a href ="#" alt ="u" > </ a >
< a href ="#" alt ='a[href=""]' > </ a >
</ div >
< textarea id ="user_text" ></ textarea >
当然、任意の数のリンク、ボタンが可能です。 それらがどのようにスタイルされるかは、あなたのCSSのファンタジーにのみ依存します。
以下はJavaScriptコードです。 タグ挿入ボタンのクリックを処理する責任があります。
< script >
$( document ).ready( function (){
$( '.bb_bar a' ).click( function () {
var button_id = attribs = $( this ).attr( "alt" );
button_id = button_id.replace(/\[.*\]/, '' );
if (/\[.*\]/.test(attribs)) { attribs = attribs.replace(/.*\[(.*)\]/, ' $1' ); } else attribs = '' ;
var start = '[' +button_id+attribs+ ']' ;
var end = '[/' +button_id+ ']' ;
insert(start, end);
return false ;
});
});
function insert(start, end) {
element = document .getElementById( 'user_text' );
if ( document .selection) {
element.focus();
sel = document .selection.createRange();
sel.text = start + sel.text + end;
} else if (element.selectionStart || element.selectionStart == '0' ) {
element.focus();
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
} else {
element.value += start + end;
}
}
</ script >
* This source code was highlighted with Source Code Highlighter .< script >
$( document ).ready( function (){
$( '.bb_bar a' ).click( function () {
var button_id = attribs = $( this ).attr( "alt" );
button_id = button_id.replace(/\[.*\]/, '' );
if (/\[.*\]/.test(attribs)) { attribs = attribs.replace(/.*\[(.*)\]/, ' $1' ); } else attribs = '' ;
var start = '[' +button_id+attribs+ ']' ;
var end = '[/' +button_id+ ']' ;
insert(start, end);
return false ;
});
});
function insert(start, end) {
element = document .getElementById( 'user_text' );
if ( document .selection) {
element.focus();
sel = document .selection.createRange();
sel.text = start + sel.text + end;
} else if (element.selectionStart || element.selectionStart == '0' ) {
element.focus();
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
} else {
element.value += start + end;
}
}
</ script >
* This source code was highlighted with Source Code Highlighter .
これがコード全体です。
実施例PS（10/11/09）
このコード（jQueryプラグインとしてスタイル設定されたマイナーな追加を含む）