Develop Reference

Insertion of characters before and after selection in textbox

I'm attempting to insert a value before and after a selection within my textbox (upon click of a button).
<script type="text/javascript">
$(document).ready(function(){
$('.boldbutton').on('click', function(){
var body = $("#id_body").val();
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = '<' + body.substring(start, end) + '>';
text = body.substring(0, start) + selection + body.substring(end);
$("#id_body").val(text);
});
});
</script>
If I select 'a' and click the boldbutton, this is what appears in the textbox:
a<a>a
What should appear is
<a>
Any thoughts on why this is happening?
thanks!

Try the following:
$('.boldbutton').on('click', function(){
var body = $("#id_body");
var len = body.value.length;
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = body.value.substring(start, end);
var replace = '<' + selection + '>';
body.value = body.value.substring(0,start) + replace + body.value.substring(end,len);
});

The problem could be that the text field has lost its focus by the time the button gets clicked, hence the empty text selection. One thing you could do is to keep a reference to the selected text before it actually loses the focus (with .blur()), and use this data on the button click handler instead of reading from the current state of the selection, which is again, empty.
$('#id_body').blur(function(e) {
$(this).data('selection', {
start: this.selectionStart,
end: this.selectionEnd
});
})
$('.boldbutton').click(function() {
var $body = $('#id_body');
var sel = $body.data('selection');
var text = $body.val();
var start = sel.start;
var end = sel.end;
var selection = '<' + text.substring(start, end) + '>';
if (end) {
text = text.substring(0, start) + selection + text.substring(end);
$body.val(text);
$body[0].selectionStart = start;
$body[0].selectionEnd = start + selection.length;
}
$body.focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="id_body" rows="4">Select some text</textarea>
<button class="boldbutton">Bold me</button>

Remove "comma" separator after last element

I have the below code.
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
elem = $(this);
part = $(this).attr("data-part-name");
//alert(part);
selected_options = "";
$('.' + part).each(function () {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + ' <b>,</b> '
}
});
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);
});
});
If you see I am adding a "comma" to selected options.
Now problem is it adds comma even after the last element.
How can I remove the last comma

.map() will a perfect fit for this. Also you can filter the checked items using :checked and filter
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
var elem = $(this);
var part = $(this).attr("data-part-name");
//alert(part);
var selected_options = $('.' + part).filter(':checked').map(function () {
return '<b>' + $(this).attr("data-option-name") + '</b>'
}).get();
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.join(', '));
});
});

You can use the index of iteration to compare with length of parts element and do the decision whether a comma needs to be added or not.Modify the code to:
var totalparts=$('.' + part).length;
$('.' + part).each(function (i) {
if ($(this).is(":checked")) {
selected_options += $(this).attr("data-option-name") + totalparts!=(i+1) ?' <b>,</b> ':'';
}});

Just remove last , substring from the string,
if(selected_options.length > 0){
selected_options = selected_options.slice(0,-1)
}
$("#part_child_" + elem.attr("data-part-id")).html(selected_options);

replace this line
$("#part_child_" + elem.attr("data-part-id")).html(selected_options.replace(/[\<\>\,b\/\s]+$/,''));

js bb codes duplicate action error

just made my own bbcodes plugin for textarea
but i wasn`t able to correct the error..
If the page uses 2 textareas, in 1st one actions are dublicated twice.
If the page uses 1 textarea, everything is ok.
How to fix it?
code:
/*
* plugin: bbcodes based on jquery.bbcode.js
* version: 0.2
*
* author: atomos
* site: http://light-engine.ru
*/
(function($){
$.fn.bbcode = function(options){
var options = $.extend({
tag_bold: true,
tag_italic: true,
tag_right: true,
tag_center: true,
tag_left: true,
tag_link: true,
tag_image: true,
image_url: 'bbimage/'
}, options||{});
var taid = $(this).attr('name');
var text = '<div class="btn-group">';
if(options.tag_bold)
{
text = text + '<a class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>';
}
if(options.tag_italic)
{
text = text + '<a class="btn" title="Курсив" href="#" id="i"><i class="icon-italic"></i></a>';
}
text = text + '</div><div class="btn-group">';
if(options.tag_right)
{
text = text + '<a class="btn" title="Направо" href="#" id="right"><i class="icon-align-right"></i></a>';
}
if(options.tag_center)
{
text = text + '<a class="btn" title="Центр" href="#" id="center"><i class="icon-align-center"></i></a>';
}
if(options.tag_left)
{
text = text + '<a class="btn" title="Налево" href="#" id="left"><i class="icon-align-left"></i></a>';
}
text = text + '</div><div class="btn-group">';
if(options.tag_link)
{
text = text + '<a class="btn" title="Ссылка" href="#" id="url"><i class="icon-share-alt"></i></a>';
}
if(options.tag_image)
{
text = text + '<a class="btn" title="Изображение" href="#" id="img"><i class="icon-picture"></i></a>';
}
text = text + '</div>';
$(this).wrap('<div id="bbcode-' + taid + '"></div>');
$('#bbcode-' + taid).prepend('<div class="btn-toolbar">' + text + '</div>');
$('.controls a[class=btn]').click(function()
{
var id = $(this).parent('.btn-group').parent('.btn-toolbar').parent().attr('id');
var area = $('textarea[name=' + id.substring(7) + ']').get(0);
var button_id = $(this).attr('id');
var param = '';
var start = '[' + button_id + ']';
var end = '[/' + button_id + ']';
if (button_id == 'img')
{
param = prompt('Введите адрес картинки:', 'http://');
if (param && param != 'http://') start += param;
else return false;
}
else if (button_id == 'url')
{
param = prompt('Введите адрес ссылки:', 'http://');
if (param && param != 'http://') start = '[url href=' + param + ']';
else return false;
}
insert(start, end, area);
return false;
});
}
function insert(start, end, element)
{
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;
}
}
})(jQuery);
i have demo: here

Your problem is this:
$(document).ready(function(){
$('textarea').each(function() {
$(this).bbcode();
});
});
That means that your script is going trough every textareas on the page and run bbcode() function on them.
For some reason it iterates trough the first textarea as many times as there are textareas on page.
So if you have 2 areas function will be executed 2 times on first area 1 time on second.
If you have 3 areas function will be executed 3 times on first, 2 times on second and 1 time on last one.
And so on...
I would suggest to heavily adjust your script so that you can forward an ID parameter of specific textarea that you wish to manipulate when you do an onclick event on osme of bbcode buttons like:
<textarea class="input-xxlarge" id="area_1" rows="3"></textarea>
<a onclick="$('#area_1').bbcode();" class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>
This is only a tip in which direction you should go... And also consider not doing it with jquery instead do it in pure JS it is much cleaner and on the end you will know every bit of your code. So that future maintaining of script would be fast and easy.

Create list html from selected text in Textarea

I have found various examples of using jquery to wrap selected text from a textarea in html tags, but I would like to adapt this slightly to create a list when multiple lines of text are selected.
Currently the code below wraps the whole selection in the list tags but I would also like to replace all the carriage returns with the closing and opening tags for list items - so each line in the text area is a new list item.
I think one of the problems might be that the .val function reads the text area as a single line.
jquery:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});
body:
<textarea id="markItUp" cols="80" rows="20"></textarea>
<br />
<input type="button" value="Bold" id="BoldIt" />

split your text like this:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var s = "\n";
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = "";
var rows = selectedText.substring(start, end).split(s);
for(var i = 0; i < rows.length; i++) {
replacement += openTag + rows[i] + closeTag + s;
}
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});

trigger keyup event on a tinymce window

I have a webpage/form with multiple tinymce instances and setup to respond with count of words/characters. everything works fine but could not get the display of word/character count on page load with initial content. here is my setup portion in tinymce setup.
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
}
}
Now the part i am struggling is how to trigger key up when the page is displayed with initial content so that it displays word/character count.
I tried $('#' + tinyMCE.editor(0).id + '_ifr').keyup(); and $('#textarea1').keyup(); but no use.
Can some one help me to get it right?

Add this to your setup:
ed.onInit.add(function(ed) {ed.onKeyUp.dispatch();});
Doc: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.util.Dispatcher

After:
tinymce.init
you place the code:
init_instance_callback: function(editor) {
editor.on('keyUp', function(e) {
observa_boton_ir_paso1();
});
}

There was a character missing. Try this (works at elast in my browser FF 3.6.17)
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
});
}