📜 ⬆️ ⬇️

simple editor bb codes

Most recently, while working on the next project, I needed a simple bb code editor.
After a bit of thinking and searching on Google, I wrote my own, probably there is no place to be easier ... The editor requires the Jquery library to work.
I publish it here, can someone come in handy.
The HTML code of the editor looks like this:
< 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 >


Naturally possible any number of links, buttons. how they are designed depends solely on your imagination CSS to help.
Below is the JavaScript code. Which is responsible for handling the insertion of buttons for inserting tags.
< 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 .

That's actually all the code.
Working example

PS (11/10/09)
This code (with a few additions designed as a plugin for jQuery)

')

Source: https://habr.com/ru/post/70174/


All Articles