シンプルなbbコードエディター

ごく最近、別のプロジェクトに取り組んでいるときに、単純な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プラグインとしてスタイル設定されたマイナーな追加を含む）