(2022-02-18, 02:18 AM)lkop Wrote: is there anyway we can add bbcode button in this shoutbox?
1) Open
dvz_shoutbox_panel ( Template Sets » Global Templates » Edit Template: dvz_shoutbox_panel )
<div class="panel">
<form>
<input type="text" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />
<input type="submit" style="display:none" />
</form>
</div>'
edit to
<div class="panel">
<form>
<input type="text" id="shout_text" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />
<input type="submit" style="display:none" />
<a href="#" id="shout_format" data-format-id="1">Bold</a>
<a href="#" id="shout_format" data-format-id="2">Italic</a>
<a href="#" id="shout_format" data-format-id="3">Strike</a>
<a href="#" id="shout_format" data-format-id="4">Under</a>
<a href="#" id="shout_format" data-format-id="5">URL</a>
</form>
</div>
2) Open
dvz_shoutbox.js (/jscripts/dbz_shoutbox.js) and at the bottom add
$('#shoutbox').on('click', '#shout_format', function()
{
Add_Styling( $(this).attr('data-format-id') );
return false;
});
function getCursorPos(el)
{
if (el.selectionStart){ return el.selectionStart; }
else if (document.selection)
{
el.focus();
var r = document.selection.createRange();
if (r == null) { return 0; }
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
function Add_Styling(type)
{
var message = $('#shoutbox input.textbox').val();
var text_field = $('#shoutbox input.textbox');
var currentPos = getCursorPos(document.getElementById("shout_text"));
var s_start = text_field.prop('selectionStart');
var s_end = text_field.prop('selectionEnd');
var m_mid = "";
var m_mid2 = "";
var pos = 0;
var extra_pos = 0;
var final_msg = '';
if( type == 1 ) // BOLD
{
m_mid = "[b][/b]";
m_mid2 = "[b]"+message.substring(s_start, s_end)+"[/b]"
extra_post = 3;
}
else if( type == 2 ) // ITALIC
{
m_mid = "[i][/i]";
m_mid2 = "[i]"+message.substring(s_start, s_end)+"[/i]"
extra_post = 3;
}
else if( type == 3 ) // STRIKETHROUGH
{
m_mid = "[s][/s]";
m_mid2 = "[s]"+message.substring(s_start, s_end)+"[/s]"
extra_post = 3;
}
else if( type == 4 ) // UNDERLINE
{
m_mid = "[u][/u]";
m_mid2 = "[u]"+message.substring(s_start, s_end)+"[/u]"
extra_post = 3;
}
else if( type == 5 ) // URL
{
m_mid = "[url=] Press here [/url]";
m_mid2 = "[url="+message.substring(s_start, s_end)+"] Press here [/url]"
extra_post = 5;
}
if( s_start == s_end )
{
m_start = message.substring(0, currentPos);
m_end = message.substring(currentPos, message.length );
final_msg = m_start+m_mid+m_end;
pos = currentPos+extra_post;
}
else
{
m_start = message.substring(0, s_start);
m_end = message.substring(s_end, message.length );
final_msg = m_start+m_mid2+m_end;
pos = 10000;
}
$('#shoutbox input.textbox').val(final_msg);
$("#shoutbox input.textbox").focus();
$("#shoutbox input.textbox").prop('selectionStart', pos);
$("#shoutbox input.textbox").prop('selectionEnd', pos);
}
This includes
Bold,
Italic,
Strikethrough,
Underline,
URL tags and you can format selected range of text ( if selected )
NOTE: you might need to edit css to work with your theme
![[Image: d5AQIYs.gif]](https://camo.mybb.com/7ddb59405ca2b6da746a3d9619815a1ada9f6214/68747470733a2f2f692e696d6775722e636f6d2f643541514959732e676966)
