Quick Reply BBCode Buttons (UBBC)

[Forever Sunshine]

  Yep, that's exactly what I did. Thanks so much, Chris! You are the miracle worker. Have a great day!

[♥ ℒʊ√ ♥]

Uh-oh, Chris ~

Your code worked so well, that "Next Thread", "Previous Thread" not only disappeared in the Quick Reply box, it disappeared from the top of each thread's page! 

Help, please . . .  and thank you. 

[Chris]

try .actions + ui-selectMenu-box

[♥ ℒʊ√ ♥]

Nope, Chris .

That didn't do it.


Edit: That did do it, Chris . 

I realized you forgot the period before .ui-selectMenu-box.

Aug 3, 2017 1:24:01 GMT -8 Chris said:

try .actions + ui-selectMenu-box

I added it and that did the trick. 

[Vapers United]

Hello Chris

I am very new to this stuff and I messed up. I installed what is labeled V0.9.81 in About (V0.9.8.1 on page 1 here) . I made a bad attempt to use blockquote to make an Indent button. Where I messed up was that I modified code in what must have been the very last section of code for a button. I deleted my incorrect entries from there because they didn't work, so now the entries that were there are gone.

I overwrote, saved, and then deleted the data entries that were displayed in an entry that began with "span"...



...because I mistakenly thought it was nothing more than an example. I didn't lose any buttons, but fear that I may have lost functionality to one.

In order for me to put it back, I would need to:

1. type the word span in tag (required)

2. know the complete URL to be placed in image (required)

3. type the word Highlight (or whatever it was) in title, and

4. know the complete entry to be placed in attributes

before moving on in my attempts to create my own buttons. If there's a way to figure out what it was, would you be so kind as to give me that info, please?

OR, if I uninstall V0.9.81 (V0.9.8.1) and install V0.9.9, would that automatically correct it?

Thanks in advance.

[Chris]

You can simply reinstall the plugin either with the same or newer version to get it back. The Highlight pen is the only button that comes preconfigured with the plugin

[Vapers United]

Aug 13, 2017 9:03:22 GMT -8 Chris said:

You can simply reinstall the plugin either with the same or newer version to get it back. The Highlight pen is the only button that comes preconfigured with the plugin

Thank you for the super fast response and for your continued support of this great plugin!!!

EDIT:

Hello again, Chris

I installed V0.9.9. Checking with you before I save anything. I want to add an Indent button. Based on Stinky666's code, I need:

tag = blockquote
image = one that I saved on ProBoards
title = Indent
attributes = style:float=right
index = 3
Target ID = ?4? (or 3 because you start with zero?)

Preview Tab = checked
BBcode Tab = checked

I'd like to place this Indent button in between Justify Full & Table. If I interpret the instructions in Target ID correctly, this should be possible.

Since I'm trying to move Table one space to the right, and Justify Full is in position 4 (in group 3), would Target ID = 4, 3, or something else?

Also, it appears that I need two button images for a button; one for inactive and a second for active. Is this the case, or does the plugin "push in" and shadow the inactive image for me?

These are the buttons I made and saved as a .PNG file...



I am posting this for two reasons. First, I would like to be sure that they are the correct size (26x22). Second is that if anyone likes them, they are free to crop them out (provided they are the correct size). They are what I'm calling Indent, Outdent, and Insert Space (to start a new sentence) [which I doubt I will use].

[Vapers United]

OK, this is what I have tried...

tag = blockquote
image = one that I saved on ProBoards
title = Indent
attributes = style:float=right (And style:float=left)
index = 3
Target ID = (nothing makes a difference that I can see, so I left it blank for now)

Preview Tab = checked
BBcode Tab = checked

The title above the button says "Insert Indent" (IDK where the word Insert came from). The button is at the end of the correct Group (group 3).

In action...
Placing the cursor before text that is already there does nothing.
Highlighting a block of text and trying to Indent it makes it disappear. It is actually deleted.

Something about the button is not working properly. If I do it manually (like below) it works perfectly...

[blockquote]This is a bunch of text[/blockquote] (I cheated here and made the leading [ be Arial)

And even if I leave attributes blank, highlighted text is deleted (and CTRL+Z does not bring it back).

OK, I read back from the beginning again. Apparently, I don't know how to decipher this (if it applies to me)...

All I want to do is be able to Indent a sentence, a paragraph, a picture, or whatever I place the cursor in front of (including highlighted text that is already there) to take the Indent action when the button is clicked. I'm starting to think that style:float=whatever is not what would apply to me here.

Maybe all I need is a blockquote with a closing /blockquote behind it somehow. I'm not a coder, so I really don't know what I'm doing! And I really hope that the Indent/Outdent buttons will be included when V1.0 is released. It can be unselected by anyone who doesn't want it, so why not?

Do you have any pointers that I could benefit from, please.

[Chris]

You'd be correct, you wouldn't want to float a blockquote, it would simply not be what you had come to expect from a blockquote. Most browsers will implement a blockquote as a DIV with a 40px left margin so floating it kinda defeats that

This is a blockquote but floated right
[blockquote style="float:right;border:2px dashed;"]This is a blockquote but floated right[/blockquote]

This is a normal blockquote
[blockquote style="border:2px dashed;"]This is a normal blockquote[/blockquote]

Target ID is not a number, the help tooltip for target ID says:

The ID of an existing button which will be used when placing your button. Anything in this field overrides and changes the meaning of the index field. If there's a 1 in the index then your button will be placed after the target button. If index contains a -1 then your button will be placed before the target button otherwise the target button will be replaced with your button. If the ID does not exist then then this field will be treated as if it were left empty.

so it would be the id for an existing button not a number. If you look on the "Users Manual" tab ("Code of Conduct" on v0.9.9) you'll see a list of IDs for the default buttons

Currently the ID for the standard menus and buttons supplied by Proboards are as follows:

fontName, foreColor, fontSize, bold, italic, underline, strikethrough, superscript, subscript, removeFormat, justifyLeft, justifyCenter, justifyRight, justifyFull, insertTable, insertUnorderedList, insertHorizontalRule, createLink, createEmail, insertImage, insertVideo, insertUserLink, insertCode, insertQuote, insertSmiley, insertEmbed

So if you wanted to place it between the justify full and table buttons you would enter justifyFull in the targetID field and a 1 in the index field so the button comes after the justy full button. You could also enter insertTable as the targetID and -1 for index so the button comes before the table button. If index contained neither a 1 or a -1 but a valid identifier was in targetID then your new button would instead replace the target button.

You can enter a second button image to be used for distinguishing between active and inactive states by appending a pipe symbol (this vertical line on your keyboard: | ) then add a second image url after it. I've never actually used that feature or met anyone who has so let me know if it still works (it's been years since that particular part of the code has been touched)

The plugin isn't really affected by the size of the button but it might look odd if the button is vastly different in size from the other buttons. You also don't need to enter anything in attributes if the tag has no attributes, the image you posted was of an older version where attributes was required so entering nonsensical in there was required to continue.

If you highlight a section of text and click the button it should wrap that highlighted text in blockquotes. If you click the button without highlighting anything then it will create and empty blockquote which will populate once you start typing. Putting your cursor in front of some text then hitting the button won't do a thing to the text that comes after the cursor, it is what you type after that action that will be affected.[/b][/b]

[Vapers United]

Aug 13, 2017 22:51:05 GMT -8 Chris said:

You'd be correct...

EDITED below Horizontal Rule (the note you asked for)

Thank you so much for this! The details you supplied should fix me right up.

Before moving on with that, I'd like to mention some things that seem glitchy. I don't think they are bugs in your code. I think they are due to the way the 3 Editors (Quick Reply, BBCode, and Preview) work (or don't work) in the first place.

I was working with several features in the Editor last night (after trying and deleting V0.9.9 and V0.9.8.1), and noticed some things that seem odd, as compared to editors that I have used to date on other forums. Various buttons may act differently between Quick Reply, BBCode, and Preview (whether this plugin is installed or not).

For example...

If I highlight a block of text to be Centered in the Preview editor, quite often, everything on the page will be centered, with sometimes only things above it or below it being effected.

The List button does some strange things, too...

1. Sentence one.

   Sentence two.

   Sentence three.
   

   Sentence four.

2. List item 2
3. List item 3
4. List item 4

Above is what happens when 4 lines of text are highlighted in preparation to put them into a List. Only the first of the four sentences is handled properly. This happens in all three: Quick Reply, BBCode, and Preview. Everything past "List item 1" has to be dealt with manually.

Depending on whether I am working with either BBCode option or the Preview tab, things can happen differently. As another example, if I use your Highlight button, it works properly in Quick Reply and BBCode, but in Preview, the text that was to be highlighted in yellow disappears. It is deleted and CTRL+Z does not bring it back.

But I believe this is due to the following (whether this plugin is installed or not)...

To begin with, Group 1 has never worked for me in the Preview tab. When I click on either "Font Face" or "Font Size", my highlighted text is deselected and the buttons do not take effect.

The buttons in Group 2 seem to work OK. Things don't start getting glitchy until Group 3. I have not tried every button in Groups 3 and 4, but before moving forward with your code, I wanted to mention this... because my buttons will be in Group 3.

If you are not the person to tell about this, then please tell me where to post about it. I can't see getting involved with your code until I either fully understand how all three Editors are supposed to work (and their limitations), or they are repaired. It's mostly the "things disappearing" part that has me concerned.

Sorry for the lengthy post, but I didn't know how else or where else to do it.

Thanks

---

The note you asked for.

Adding a pipe between two URLs does not work. "Value must be a valid URL." is displayed. I tried it two ways:

1. with no space in between...

http://storage.proboards.com/6216342/images/uaSJpAVwEJfJbLnBRcUl.png|http://storage.proboards.com/6216342/images/sNRPbpThwyVlxKNiQcKl.png

and

2. with "space pipe space" in between...

http://storage.proboards.com/6216342/images/uaSJpAVwEJfJbLnBRcUl.png | http://storage.proboards.com/6216342/images/sNRPbpThwyVlxKNiQcKl.png

Also, I created the Indent button as you suggested. Just as I suspected (as mentioned above), it works perfectly in Quick Reply and BBCode, but when used in Preview, the highlighted text disappears and is deleted.

[Chris]

Aug 14, 2017 8:59:26 GMT -8 Vapers United said:

Aug 13, 2017 22:51:05 GMT -8 Chris said:

You'd be correct...

Thank you so much for this! The details you supplied should fix me right up.

Before moving on with that, I'd like to mention some things that seem glitchy. I don't think they are bugs in your code. I think they are due to the way the 3 Editors (Quick Reply, BBCode, and Preview) work (or don't work) in the first place.

I was working with several features in the Editor last night (after trying and deleting V0.9.9 and V0.9.8.1), and noticed some things that seem odd, as compared to editors that I have used to date on other forums. Various buttons may act differently between Quick Reply, BBCode, and Preview (whether this plugin is installed or not).

For example...

If I highlight a block of text to be Centered in the Preview editor, quite often, everything on the page will be centered, with sometimes only things above it or below it being effected.

The List button does some strange things, too...

1. Sentence one.

   Sentence two.

   Sentence three.
   

   Sentence four.

2. List item 2
3. List item 3
4. List item 4

Above is what happens when 4 lines of text are highlighted in preparation to put them into a List. Only the first of the four sentences is handled properly. This happens in all three: Quick Reply, BBCode, and Preview. Everything past "List item 1" has to be dealt with manually.

Those concerns regarding Proboards WYSIWYG editor have been brought up in the past which is the main reason Proboards will be abandoning their current V5 editor and going with based on tried and true code in V6. The problem of course is that online editors such as this one is not a real richtext editor but instead an approximation using HTML and CSS to simulate one and people who have grown up using true richtext editors such M$ Word would naturally expect a certain behavior and notice when it did not do as expected. All simulated WYSIWYG editors are created equal but some are more equal than others   and parity will be achieved in the next Proboards iteration.

---

Aug 14, 2017 8:59:26 GMT -8 Vapers United said:

Depending on whether I am working with either BBCode option or the Preview tab, things can happen differently. As another example, if I use your Highlight button, it works properly in Quick Reply and BBCode, but in Preview, the text that was to be highlighted in yellow disappears. It is deleted and CTRL+Z does not bring it back.

But I believe this is due to the following (whether this plugin is installed or not)...

To begin with, Group 1 has never worked for me in the Preview tab. When I click on either "Font Face" or "Font Size", my highlighted text is deselected and the buttons do not take effect.

The buttons in Group 2 seem to work OK. Things don't start getting glitchy until Group 3. I have not tried every button in Groups 3 and 4, but before moving forward with your code, I wanted to mention this... because my buttons will be in Group 3.

If you are not the person to tell about this, then please tell me where to post about it. I can't see getting involved with your code until I either fully understand how all three Editors are supposed to work (and their limitations), or they are repaired. It's mostly the "things disappearing" part that has me concerned.

Sorry for the lengthy post, but I didn't know how else or where else to do it.

Thanks

This one obviously is the plugin but I could not recreate it and worked as expected in Chrome, Opera and Firefox. It wasn't until I tested it in Internet Exploder that I observed the problem (I admit that the last time I used IE was just after installing win10 and I had to use it to download Chrome). After seeing it I knew exactly what the problem was whithout having to debug. It was a lack of document context to a single jquery statement, which we had encountered before in numerous coding discussions. Other browser consider a dynamically created iframe as not being "foreign" in regards to importing nodes but IE does so a context needs to be added to avoid documents sharing nodes across border lines.
I believe I left the plugins in edit mode so you can fix this by editing the single line of code in build mode. Go to the components tab and on line 180 for V0.9.9 ( or line 152 for V0.9.8.1) and add the red portion

editor.surroundSelection(editor.name == "Visual" ? $("<" + values.tag + ">" + (pragmas.content || "") + "</" + values.tag + ">", editor.document).attr(values.attrs).get(0) : values.tag, $.isEmptyObject(values.attrs) ? false : values.attrs, true, pragmas.content);

^{*the single line may wrap itself across multiple lines to avoid stretching or adding horizontal scrollbars to this post}

---

Aug 14, 2017 8:59:26 GMT -8 Vapers United said:

The note you asked for.

Adding a pipe between two URLs does not work. "Value must be a valid URL." is displayed. I tried it two ways:

1. with no space in between...

http://storage.proboards.com/6216342/images/uaSJpAVwEJfJbLnBRcUl.png|http://storage.proboards.com/6216342/images/sNRPbpThwyVlxKNiQcKl.png

and

2. with "space pipe space" in between...

http://storage.proboards.com/6216342/images/uaSJpAVwEJfJbLnBRcUl.png | http://storage.proboards.com/6216342/images/sNRPbpThwyVlxKNiQcKl.png

Also, I created the Indent button as you suggested. Just as I suspected (as mentioned above), it works perfectly in Quick Reply and BBCode, but when used in Preview, the highlighted text disappears and is deleted.

Once again more likely since not used this feature eventually got forgotten, the "Value must be a valid URL" comes from that field being set to URL ONLY meaning the pipe and a secondary URL would be considered invalid characters. Changing to to "Anything" should then allow the secondary URL input.




Given the severity of this bug for IE users, I'll release a new version with the above mentioned fixes when time permits but this plugin will be essentially obsolete in the upcoming V6 so if you are not affected by the above bug and disabled secondary button feature then there should be no need to update

[Vapers United]

Aug 15, 2017 3:43:18 GMT -8 Chris said:

Those concerns regarding Proboards WYSIWYG editor have been brought up in the past which is the main reason Proboards will be abandoning their current V5 editor and going with based on tried and true code in V6. The problem of course is that online editors such as this one is not a real richtext editor but instead an approximation using HTML and CSS to simulate one and people who have grown up using true richtext editors such M$ Word would naturally expect a certain behavior and notice when it did not do as expected. All simulated WYSIWYG editors are created equal but some are more equal than others   and parity will be achieved in the next Proboards iteration.

---

This one obviously is the plugin but I could not recreate it and worked as expected in Chrome, Opera and Firefox. It wasn't until I tested it in Internet Exploder that I observed the problem (I admit that the last time I used IE was just after installing win10 and I had to use it to download Chrome). After seeing it I knew exactly what the problem was whithout having to debug. It was a lack of document context to a single jquery statement, which we had encountered before in numerous coding discussions. Other browser consider a dynamically created iframe as not being "foreign" in regards to importing nodes but IE does so a context needs to be added to avoid documents sharing nodes across border lines.
I believe I left the plugins in edit mode so you can fix this by editing the single line of code in build mode. Go to the components tab and on line 180 for V0.9.9 ( or line 152 for V0.9.8.1) and add the red portion

editor.surroundSelection(editor.name == "Visual" ? $("<" + values.tag + ">" + (pragmas.content || "") + "</" + values.tag + ">", editor.document).attr(values.attrs).get(0) : values.tag, $.isEmptyObject(values.attrs) ? false : values.attrs, true, pragmas.content);

^{*the single line may wrap itself across multiple lines to avoid stretching or adding horizontal scrollbars to this post}

---

Once again more likely since not used this feature eventually got forgotten, the "Value must be a valid URL" comes from that field being set to URL ONLY meaning the pipe and a secondary URL would be considered invalid characters. Changing it to "Anything" should then allow the secondary URL input.




Given the severity of this bug for IE users, I'll release a new version with the above mentioned fixes when time permits but this plugin will be essentially obsolete in the upcoming V6 so if you are not affected by the above bug and disabled secondary button feature then there should be no need to update

All I can say is WOW!!! You really know your stuff!

NOTE: I have V0.9.9 installed.

I apologize for not mentioning that I use IE11 under Win10. I was going to do that, but the thought got lost while explaining the details of everything else.

1. I eagerly await ProBoards V6, as I'm sure you do as well.

2. Adding ", editor.document" as described in your second point fixed that. I found it easily with your instructions.

3. Making the change from URL to Anything did not work for me the 2 ways I tried it, so I changed it back to URL and I am satisfied with this. The Indent button works perfectly now since the change in #2 above. I will no longer be concerned with an Outdent button to revert Indent button changes, as this is now easily enough done on the Preview tab (WYSIWYG).

Because of your explanations, instructions, and attention to detail while describing things in all of your replies to me, I have my Indent button working, and also understand my PB V5 limitations now.

As far as I'm concerned, you have gone above and beyond the call of duty. I tip my hat to you, Sir, and wish you a good day.

Thank you ever so much!!!

PS:
If you ever want or need someone as a Tester for your work in the future, I would be more than happy to be of assistance. I have created a member that I named Testing, exclusively for this purpose. And to that point, if you let me know when you "release a new version with the above mentioned fixes" by PM (or whatever means), I will give you any and all assistance you may need.

[Chris]

Library updated to version 1.0.0 (Sep 25, 2017) with the following changes:

v1.0.0 - September 25, 2017

- fixed change in bbcode image base
- fixed Internet Explorer disappearing document selection on preview tab
- added 'wysiwygquickcreate' custom event after quick reply buttons build

[JJ]

Hi, Chris. Got a question, is this fix a general fis and everyone should probably update the plugin, or fact specific to IE? I had to quit using IE about 4 months ago, it really wasn't playing nice with W10 and all the updates. I still prefer it, but am using Firefox now.

By the way, a couple of days ago the little smile icon disappeared in my Quick Reply but I didn't have time to address the issue. It's back now, by magic, and I can see the smilies, but they don't always work on a click. Actually, it's become pretty common in the last few weeks. Wasn't sure if it was the cumulative update by W10 or not.

hootyowl.proboards.com

[Chris]

Sept 25, 2017 16:19:40 GMT -8 JJ said:

Hi, Chris . Got a question, is this fix a general fis and everyone should probably update the plugin, or fact specific to IE? I had to quit using IE about 4 months ago, it really wasn't playing nice with W10 and all the updates. I still prefer it, but am using Firefox now.

By the way, a couple of days ago the little smile icon disappeared in my Quick Reply but I didn't have time to address the issue. It's back now, by magic, and I can see the smilies, but they don't always work on a click. Actually, it's become pretty common in the last few weeks. Wasn't sure if it was the cumulative update by W10 or not.

hootyowl.proboards.com

The image base fix is a general update for everyone however it is relatively rare because the plugin is written to update its collection of button images (on a per theme basis) automatically every time the full posting page is loaded. This bug would only affect those who are using the plugin for the very first time (visiting full posting page would effectively fix it) or who are using a device that disallows/auto-deletes persistent storage. If you or your members are unaffected by the bug (buttons don't show on quick reply but dropdowns such as fonts still do) then feel free to dismiss the update  for later

It should be noted that this is not the first time P has changed the image base but with V6 around the corner and this plugin becoming obsolete this should be the last

Jun 3, 2015 16:57:18 GMT -8 Nscalerr said:

The plugin on my forum appears to be pulling the images from the wrong server. Thanks to CheatAreZee for finding the problem. See this link for more info, if needed.



support.proboards.com/thread/551656/attention-required-screen

For example, the "Quick Reply BBCode Buttons" plugin that the forum is using is pointing to the wrong server to pull the smiley images from (ie. for the image, it's pulling from railvillage.proboards.com/images/smiley/smiley.png -- when it should instead be pulling from the image server: images.proboards.com/v5/smiley/smiley.png.

Edit: Updated to the latest version, so hope it is now getting the images from the correct server.