Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 BBCode in topic titles?
#
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
PM
#
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...

signature
email: admin@jcink.com :: blog: John C.
#
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
PM
#
That's totally awesome kjrod98 thank you so much for the contribution!

signature
email: admin@jcink.com :: blog: John C.
#
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.

This post has been edited by Gaomon274: May 16 2018, 10:42 AM

signature
Oh noes the snobolds!


user posted image https://discord.gg/A5DmErU (Community ZetaBoards Discord for updates on the ZB transfers.) user posted image
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?

This post has been edited by spike: May 16 2018, 11:38 PM
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.

This post has been edited by spike: May 16 2018, 11:48 PM
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.

signature
email: admin@jcink.com :: blog: John C.
#
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.
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())
})


This post has been edited by Dusty: May 20 2018, 03:17 PM
PM
#
QUOTE (kjrod98 @ May 18 2018, 10: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.


CODE
$('title').html($('title').html().replace(/\[(.+?)\]/gi,''));


This is the line that does that, I just tried to teach myself what all the components of Cory's code did to achieve it http://files.b1.jcink.com/html/emoticons/smile.gif and John if you could do that, it'd be a great help I'll PM you my test board. And nice Dusty!
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll