Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > BBCode in topic titles?


Posted by: spike May 16 2018, 12:49 AM
Is there a simple code that can be added to allow this? Have one on my Zetaboards and our members like to color, bold, italics, their topic titles etc

Posted by: John May 16 2018, 09:38 AM
BBCode in topic titles isn't a feature, and I haven't seen any codes over here that would allow that even on a basic level. BUT let me see the zetaboards code? I'm assuming it's javascript. It may be quick tweak to get it to work or not, but it's worth a look. I'm guessing it must be a little complex though since there are so many areas to cover...

Posted by: kjrod98 May 16 2018, 10:39 AM
QUOTE
I haven't seen any codes over here that would allow that even on a basic level

You know, I hacked this together a few years ago and I've been intending to throw this at the resource sites. Thanks for reminding me!

Okay so, this goes just above the end body tag in your board wrappers. You'd have to replace the classes with wherever your topic titles/descriptions are contained. I've included the classes where topic titles/descriptions appear for the default skins, so it'll display everywhere - search, topic listing/inside topics, board index and recent topics. If you're using HTML templates, all you have to do is add in the extra classes or IDs.

CODE
<script>
   $('.maintitle, .desc, .row4, .row2, .recent-topics-info').each(function() {
       $(this).html($(this).html()
           .replace(/\[tw]/gi, '<span class="trigger">[TW]</span>')
           .replace(/\[o]/gi, '<span class="open">[OPEN]</span>')
           .replace(/\[c]/gi, '<span class="complete">[COMPLETED]</span>')
           .replace(/\[d]/gi, '<span class="dead">[DEAD]</span>')
           .replace(/\[ip]/gi, '<span class="inprogress">[IN PROGRESS]</span>')
           .replace(/\[f]/gi, '<span class="fight">[FIGHT]</span>')
       );
   });
</script>


.replace(/\[o]/gi, '<span class="open">[OPEN]</span>')

The piece in red is what the user enters into the topic title or description. The piece in blue is what it's replaced by. Can be an image or whatever else so long as you watch your quotation marks.

Since you're wanting bbcode tags, you could do this. though you'd have to have two lines for a single tag so it may get messy depending on how much you're going for. You also have to escape each "/" for the closing tags or it won't work.

CODE
.replace(/\[i]/gi, '<i>')
.replace(/\[\/i]/gi, '</i>')


And some quick screengrabs of it in action, works nicely with custom HTML templates.
user posted image
user posted image

Posted by: John May 16 2018, 10:40 AM
That's totally awesome kjrod98 thank you so much for the contribution!

Posted by: Gaomon274 May 16 2018, 10:41 AM
I'm not entirely sure which one he's using, but I know this one by Cory is one I've seen others use so it's probably this.
http://support.zathyus.com/topic/5145807/1/?x=20

Edit - Or hey that works too.

Posted by: spike May 16 2018, 02:58 PM
Yes Gaomon that's the one we used, it's great. Cory has been a tremendous contributor over the years, I hope he comes over to Jcink too! Got it working, thanks a lot kjrod98! If anyone is interested in the full code to use for bbcode in the topic titles I'm using (bold, italics, underline, color, bgcolor) here it is:

CODE
<script>
$('title').html($('title').html().replace(/\[(.+?)\]/gi,''));
  $('.maintitle, .desc, .row4, .row2, .recent-topics-info').each(function() {
      $(this).html($(this).html()
          .replace(/\[b]/gi, '<strong>')
          .replace(/\[\/b]/gi, '</strong>')
          .replace(/\[u]/gi, '<span style="text-decoration: underline">')
          .replace(/\[\/u]/gi, '</span>')
          .replace(/\[i]/gi, '<em>')
          .replace(/\[\/i]/gi, '</em>')
          .replace(/\[color=(.+?)\](.+?)\[\/color]/gi, '<span style="color: $1">$2</span>')
          .replace(/\[bgcolor=(.+?)\](.+?)\[\/bgcolor]/gi, '<span style="background-color: $1">$2</span>')
);
  });
</script>


The only issue I see at the moment is (not sure about other browsers) in Chrome on the tab it shows the raw BBCode for the tab name it didn't do this in ZB, wonder what's missing?

Just a note though, I tried setting my topic title length to 0 for disabled max. length but it wasn't working?

Posted by: spike May 16 2018, 11:44 PM
QUOTE (spike @ May 16 2018, 07:58 PM)

The only issue I see at the moment is (not sure about other browsers) in Chrome on the tab it shows the raw BBCode for the tab name it didn't do this in ZB, wonder what's missing


I figured this out and updated the code accordingly. Another issue though:

user posted image

For some reason the full title isn't showing and cutting off like that no matter what theme I use, even default. Seems if it's past a certain character length its doing that as below you can see with a short one it looks fine:

user posted image

Any ideas?

I seem to remember Cory's code having this problem too and he fixed it but I'm not sure what he added to his original code to do that.

Posted by: John May 18 2018, 03:18 PM
Yeah that's a system core functionality and happens regardless of any skin. The topic title on the board index is clipped with '...', I am going to have to look at adding an option to disable it for your needs since I don't see any way around it.

Also, topic title lengths themselves are limited to 250char even if you set it to "0", that just disables the range, but the max still applies.

Posted by: kjrod98 May 18 2018, 05:18 PM
QUOTE (spike @ May 16 2018, 11:44 PM)
I figured this out and updated the code accordingly.

-snip-

How did you manage to work around that? I'd never even thought about it being an annoyance until you pointed it out.

Posted by: Dusty May 20 2018, 02:52 PM
QUOTE (kjrod98 @ May 18 2018, 05:18 PM)

How did you manage to work around that? I'd never even thought about it being an annoyance until you pointed it out.


You can set the title attribute to the cleaned string by running the .text() method on itself after parsing the BB code into HTML.

For what it's worth, I wrote this script a little while ago to also utilize whitelisted single parameter tags (gotta filter out dem <script> and redirect injections). Not pretty but AH WELL

CODE
var builtBB = ['i', 'b', 'u', ['color', 1], ['font-family', 1]];
$('.forum-row .row2[nowrap] a:nth-of-type(2)').each(function() {
var nu = $(this).text();
for(var i=0;i<builtBB.length;i++){
 var r1 = '\\['+builtBB[i][0]+'\\]',
  r2 = '\\[/'+builtBB[i][0]+'\\]',
  reg1 = new RegExp(r1, "g"),
  reg2 = new RegExp(r2, "g"),
  m1 = "<" + builtBB[i][0] +">",
  m2 = "<\/" + builtBB[i][0] +">";
  if(builtBB[i][1]){
   //1 Param
   var r3 = r3 = '\\['+builtBB[i][0]+'=(.*?)\\]',
    reg3 = new RegExp(r3, "g"),
    paramReturn = reg3.exec(nu);
   if(paramReturn){
    var m1 = "<span style='"+builtBB[i][0]+":"+paramReturn[1]+";'>",
    m2 = "<\/span>";
    nu = nu.replace(paramReturn[0], m1).replace(reg2, m2)
   }
  } else {
   //0 Param
   nu = nu.replace(reg1, m1).replace(reg2, m2)
  }
}
$(this).html(nu).attr('title', $(this).text())
})

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)