Create BBC widget to add css class to highlighted post

[chocobo99]

The forum supports

and already. I'm wondering how difficult it might be to add some BBC button that would wrap the selected elements and allow for a manually entered css class. 

I do not care about supporting / building the css, I can write that hard coded directly into the stylesheet. I'm just looking for direction about how to get it from the css and Javascript to the UI. I mean this would be Incredibly easy to do with Jquery or Javascript, but I still havent figured out how to the mechanics of these plugins work. 

Anyone have any suggestions, or a quick howto?

[Quozzo]

Another board uses classes to add pre-determined CSS into a post that users could select with the class bbcode.
[class=someCSS]Style this text[/class]
Which would resolve to
<span class='bbcode-someCSS'>Style this text</span>
So you would style that with the CSS
.bbcode-someCSS {
  border: 1px solid blue;
}


Would that be what you're after or would you prefer if the user could input their own CSS which I strongly don't recommend. It may even breach the ToS since they could in theory hide the adverts and/or copyright.

[Peter]

Sept 6, 2016 20:10:47 GMT -8 chocobo99 said:

The forum supports

and already. I'm wondering how difficult it might be to add some BBC button that would wrap the selected elements and allow for a manually entered css class. 

I do not care about supporting / building the css, I can write that hard coded directly into the stylesheet. I'm just looking for direction about how to get it from the css and Javascript to the UI. I mean this would be Incredibly easy to do with Jquery or Javascript, but I still havent figured out how to the mechanics of these plugins work. 

Anyone have any suggestions, or a quick howto?

Simple solution is to do attribute matching on existing attributes that the parser supports.  No plugin or JavaScript needed.  Granted, you could take it a step further and implement a UBBC button, and if that's what you want, then I would look at the plugins by Chris , as he has done the bulk of the research in that area.

Post:
[span id="my_blue_background"]Hello World![/span]

Stylesheet:

[id=my_blue_background]{

background-color: blue;

}

Notice that it's not an id selector, all we care about is attribute matching so we can apply the rules to multiple elements that could be on the page in posts.


Edit: 

Forgot to add this in a few weeks back, Chris's post reminded me.  Don't bother using the ID solution above, I forwarded some issues to ProBoards a few weeks ago, as it can be used maliciously, so expect this to be removed.

So as an alternative to replace the solution above for others that want to do something similar; use something like the title attribute to do matching, you can always do something more to remove the title off elements if you don't want it to popup when people hover over it.

[chocobo99]

Sept 7, 2016 3:05:14 GMT -8 Quozzo said:

Another board uses classes to add pre-determined CSS into a post that users could select with the class bbcode.
[class=someCSS]Style this text[/class]
Which would resolve to
<span class='bbcode-someCSS'>Style this text</span>
So you would style that with the CSS
.bbcode-someCSS {
  border: 1px solid blue;
}


Would that be what you're after or would you prefer if the user could input their own CSS which I strongly don't recommend. It may even breach the ToS since they could in theory hide the adverts and/or copyright.

That was exactly what I am after.

Simple solution is to do attribute matching on existing attributes that the parser supports. No plugin or JavaScript needed. Granted, you could take it a step further and implement a UBBC button, and if that's what you want, then I would look at the plugins by Chris, as he has done the bulk of the research in that area.

This also is very helpful. I'll read up on Chris's links and see what works best. Until then, I'll give this span id a shot.

[chocobo99]

Another quick question.

[span id="etc"] Works just Fine[/span]

[div id="etc"] But Div Does not keep the IDs [/div]

Is div id="" not supported? Or could something else be going on?

[Chris]

The rules governing what the BBCode parser allows are only garnered through trial and error since they are kept close to the vest and may be there for reasons that might not appear logical. I've yet to find an attribute that I would be able to term as globally supported across all bbcodes. A few such as title, id, style and (believe it or not) href come pretty close but you can always find an exception that prevent them from being totally declared global. Some such as href and style are also content checked so if using be sure to offer valid content or at least ones that seem valid (e.g. href="/windowbg2" ).

BAsically test and find one that cover the elements you desire to use them on.


[span href="/windowbg2"] window background 2 [/span]
[div href="/windowbg"] window background [/div]
[b href="/windowbg3"] window background 3 [/b]
[font href="/windowbg4"] window background 4[/font]
[h1 href="/windowbgA"] window background A[/h1]
[img style="max-width:100%;" href="/windowbg-Alpha"]

[chocobo99]

Trial and error is pretty much how I've done things so far. That and spending a lot of time manually changing the css sheets. That's all good though. I was attempting to look for your plugins specifically, as was suggested a few posts above. However, you've got a lot of posts to individually shift through, and the library doesn't allow search by author name. So if you've any suggestions of post form plugins, with available source code, so I could reverse engineer, that would be appreiciated.

[Chris]

The following plugins should be editable so you can see how they interact with the WYSIWYG, if they are not editable for some reason then let me know and I can redo:


Type Special Characters

Syntax Highlighter

Thread Icons

UBBC Buttons (control Freak/nightly version at bottom of first post)

This thread might also be helpful

[chocobo99]

I've been looking through the Javascript and mucking about the guts of things and I've come across two seperate questions.

The first is why does the Preview menu NOT share the same CSS as the main site? And could we rewrite whatever it is reading from to instead use the preview? Objects with id's aren't parsed by the CSS, they just rot. Or is the Id parser something that is applied after the Dom loads?

The second question concerns some of the code I've been working on inside of UBBC Buttons. I've added an id=variable, and on the Preview screen it's easy enough to set the id of the attribute before it hits the editor. I get a nicely printed <span id="whatever"> </span> Dom Node to work with. However, the editor, when it takes the BBC takes just the tag name and the attrs. It does not provide an obvious interface for adding the necessary string id into the final print. I am curious if anyone knows perhaps how to make that work, or would I need to re-code the bbc editor itself? (I'm pretty sure I read somewhere I wasnt suppose to do that)

[Chris]

The wysiwyg preview is implemented as an iframe so it is a completely different document with its own CSS injected during the build phase which can be found in proboards.data("css_wysiwyg_style") and proboards.data("css_wysiwyg_non_editable") which is in turn a reflection of any choices made in the theme editor pertaining to the wysiwyg.

I'm not quite getting what you mean by "Id parser" but since it is in close proximity to a sentence referencing CSS, I'll say that although Proboard's BBCode flavor allows an ID on some elements it doesn't necessarily utilize those IDs since that could get problematic with duplicates across multiple post, an ID needs to be unique on the page or the results are pretty much chaotic. On some older browsers, for example, the existence of duplicate IDs resulted in the last one being chosen by methods such as getElementById on that platform while other platforms went with the first one found resulting in some pretty weird inconsistent platform bugs. So if you are wanting to utilize IDs in the preview editor you definitely could (especially since it is the only one on the page) by altering the CSS prior to build but I don't see the point because once it is posted it becomes part of the collective and once again poses the risk of duplicates. You can try to fight against the logic but unless you also put a system in place to guard against users creating duplicate IDs resistance is futile. The only BBCode which comes to mind that utilizes an ID is a [spoiler] and that is a randomly generated ID (not one chosen by the user for reasons previously stated) to allow for unique identification via javascript.

BBCode is ultimately controlled by Proboards, it is they who decide what attributes remain on the tag before they save it in their database, in fact it would be quite stupid of them not to do this. You as the coder have the freedom to add it back once it gets sent out again to the browser but your influence remains inside the browser not on the backend where the data is saved. This of course would entail some way of identifying specific BBCodes prior to saving to the backend so you know which ones need to have their IDs restored and what that ID should be which seems like an awful lot of work.

The alternative is to use an attribute or combination of attributes that doesn't get stripped as have been suggested in this thread. Attributes have the same weight as a class and has none of the downsides of an ID. It is the least path of resistance and one likely to remain viable in the next edition of the editor. With the impending release of V6, it has been stated that the BBCode editor will be scrapped and replaced with a completely rewritten editor which will have a documented API to allow for greater freedom with plugins being able to interact with user input and perhaps influence or at least suggest changes to the user so unless the idea of adding support for IDs just for ID sake rather than using easier alternatives is overwhelming I would advise holding off until more is learned about the new editor's capabilities. I have my doubts however that the current view of using IDs within posts will change in the next iteration given that the rules of they being unique to the page will not have changed.