Adding extra button to post editor - topic template

by Kami-sama August 7th 2017, 10:19 pm

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hey guys!

I would like to add a custom button to the editor. Like for example this button here: Adding extra button to post editor - topic template Snippe10

Adding extra button to post editor - topic template Snippe10

The button would add this code to the message field:

Code:: [temosPavadinimas] userValue1 [/temosPavadinimas] [temosAprasymas] userValue2 [/temosAprasymas] [temosIMG] userValue3 [/temosIMG]

The values from the brackets would actually be applied like this:

Code:: <br /><span class="PranesimoAntraste"><center> userValue1 </center></span><div class="PranesimoFonas"> <div class="PranesimoTekstas"> userValue2 [center]<img style="width: 440px" src="userValue3"/>[/center] </div> </div> <br />

Is this possible? Or at least, how to add a button, witch would apply the div code to the editor field?

by Kami-sama August 9th 2017, 9:31 pm

So. I have created the button.
But I cannot get it to add anything to the tex area.

I am using:
Code:
.click(function() { $("textarea").innerHTML += 'Extra stuff'; });

Any ideas?

EDIT:

Got it to add stuff. YEY.
Now, how to correctly add code? example:
Code:
[test] aaa [/test]

I know that special characters have to be separated to not interfere with javascript...
I am using:
Code:
.insertText('TEST');

EDIT2:
Okey. So lets review.
- button CHECK
- adds code on click CHECK

The last thing left - take user inputed values and replace with div code.
Not sure how it would be best to go about this...
Maybe would be best to use replace command? For example:

Code:: [temosPavadinimas]

replaced with

Code:: <br /><span class="PranesimoAntraste"><center>

then

Code:: [/temosPavadinimas] [temosAprasymas]

replaced with

Code:: </center></span><div class="PranesimoFonas"> <div class="PranesimoTekstas">

and lastly

Code:: [/temosAprasymas] [temosIMG]

replaced with

Code:: [center]<img style="width: 440px" src="

aaand

Code:: [/temosIMG]

replaced with

Code:: "/>[/center] </div> </div> <br />

Maybe there is an easier way?

by Guest August 10th 2017, 3:39 pm

Hi,

When you want to add text to a textarea you should the value property(in pure javascript) or val(in jQuery). Something like this:

Code:: textarea.value="text"

The editor used on fm forums has it's own methods for inserting content to textareas:

Code:: insertText

and

Code:: insert

. I don't know if there's any difference between them.

To transform the bbcode to html, we need to use replace and regular expressions. You'll have to add this js code with placement on topics:

Code:: $(function(){ var posts=$(".selector"), len=posts.length, i=0; for(i;i<len;i++){ posts.eq(i).html(posts.eq(i).html().replace(/\[temosPavadinimas\]/g, "<br /><span class=\"PranesimoAntraste\"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class=\"PranesimoFonas\"><div class=\"PranesimoTekstas\">").replace(/\[temosAprasymas\]/g, "").replace(/\[\/temosAprasymas\]/g, "[center]").replace(/\[temosIMG\]/g, "<img style=\"width: 440px\" src=\"").replace(/\[\/temosIMG\]/g, "\"/>[/center]</div></div><br />")); } })

You'll have to replace

Code:: $(".selector")

with the selector for the post content.

by Kami-sama August 10th 2017, 5:11 pm

Oh cool. I was a bit confused with the replacement command, but I'm starting to get it. What about = and ;? No need to put \ next to them?

Also, everything is replaced good (after couple more adjustments), except of the image. Please take a look at the screenshot attached.
It seams that image link is transformed to an actual link

Code:: <a href="....>

Is this a forum setting? Or I should just ad the <a> to replacement code?
Adding extra button to post editor - topic template Screen10

The link itself is something like this:

Code:: <a href="https://www.forestgen.mi.lt/images/Miskasspindul.jpg" target="_blank" rel="nofollow">https://www.forestgen.mi.lt/images/Miskasspindul.jpg</a>

It has the link two times. Not sure how to replace it as in the code we don't know the link -.-

by Guest August 10th 2017, 5:25 pm

There's no need to put \ before =, but you should put it before the question mark.
As you can see a regex starts and ends with /. Placing / inside the regex without the \ before it would make javascript think that you wanted to finish the regex there, therefore throwing an error. Placing \ before / is called escaping. You also have to put \ before parentheses and generally before everything that has any special meaning in regex.

In the console, my code seems to work as it should with the images. Post the modifications you made to the code(especially the replace part) here. Also, what is the original code(i mean the one that has to be transformed) you are using there?

by Kami-sama August 10th 2017, 5:43 pm

You see, when you post a link it is transformed from:

Code:: https://www.forestgen.mi.lt/images/Miskasspindul.jpg

To:

Code:: <a href="https://www.forestgen.mi.lt/images/Miskasspindul.jpg" target="_blank" rel="nofollow">https://www.forestgen.mi.lt/images/Miskasspindul.jpg</a>

So that the link would be actually active - clickable.
This issue was with your initial (original code) as well.
But anyways, here is my adjusted version:

Code:: $(function(){ var posts=$(".postbodyinside"), len=posts.length, i=0; for(i;i<len;i++){ posts.eq(i).html(posts.eq(i).html().replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="<a href="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />")); } });

And this is the original code, posted by the "user":

Code:: [temosPavadinimas]Test title[/temosPavadinimas] [temosAprasymas]test test text text[/temosAprasymas] [temosIMG]https://www.forestgen.mi.lt/images/Miskasspindul.jpg[/temosIMG]

EDIT:

I HAVE AN IDEA!
Instead of

Code:: [temosIMG]

I could use just

Code:: [img]

This would resolve all the problems. But let me know if anything else could be done using

Code:: [temosIMG]

by Guest August 10th 2017, 5:48 pm

Your code has a problem here:

Code:: .replace(/\[temosIMG\]/g, "<img style="width: 440px" src="<a href=")

The second parameter of replace is the replacement string, not the text to be replaced. This code adds the <a href in the output. See if this works:

Code:: $(function(){ var posts=$(".postbodyinside"), len=posts.length, i=0; for(i;i<len;i++){ posts.eq(i).html(posts.eq(i).html().replace(/\[temosPavadinimas\]/g, "<br /><span class=\"PranesimoAntraste\"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class=\"PranesimoFonas\">").replace(/\[temosAprasymas\]/g, "<div class=\"PranesimoTekstas\">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style=\"width: 440px\" src=\"").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />")); } });

by Kami-sama August 10th 2017, 5:53 pm

Yeah no. That is not how it works.
For example take a look bellow. When you post a link it is transformed. The replacement code has nothing to do with it. That's just how forumotion transforms links:

Adding extra button to post editor - topic template Screen11

Adding extra button to post editor - topic template Screen11

Regarding my code, yeah. That is my mistake. I was messing with it and added the <a> part in the wrong place. When I place it correctly image shows up, but I have this part left, that also needs to be removed:

Code:: " target="_blank" rel="nofollow">https://www.forestgen.mi.lt/images/Miskasspindul.jpg"/>

by Guest August 10th 2017, 6:03 pm

Add this JS with placement on topics:

Code:: $(function(){ var links=$(".postbodyinside a"), len=links.length, i=0; for(i;i<len;i++){ if(/png|jpg|jpeg/.test(links.eq(i).attr("href"))){ links.eq(i).replaceWith(links.eq(i).attr("href")); } }; })

It should replace all the links with images with text.

by Kami-sama August 10th 2017, 6:18 pm

Beautiful!

This is SOLVED.

by Kami-sama August 10th 2017, 7:22 pm

EDIT: actually testing noticed another issue.

@Wolfuryo if you remember the code for having the latest post displayed (news widget basically). It seams that script is not responding to that. I have tried enabling just in portal and enabling script in all pages - same. Does not proceed with replace command. Any ideas on this?

I have added the replacement code separately for the news widget.
With the appropriate selector:

Code:: $(function(){ var posts=$(".news_forum"), len=posts.length, i=0; for(i;i<len;i++){ posts.eq(i).html(posts.eq(i).html().replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />")); } });

I guess the script has to be loaded AFTER the post itself is loaded.
Hmm...

by Guest August 10th 2017, 7:41 pm

Post the last post script here.

by Kami-sama August 10th 2017, 7:43 pm

That's how I added it now, but I guess it has to be done right after the element is populated:

Code:: $(document).ready(function(){ $(function(){ var forum=3568; var elem=$(".news_forum"); if(!elem.length) return; $.get("/t"+forum+"-?view=newest", function(data){ data=$(".postbodyinside", data).last().html(); elem.html(data); }); $(function(){ var posts=$(".news_forum"), len=posts.length, i=0; for(i;i<len;i++){ posts.eq(i).html(posts.eq(i).html().replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />")); } }); });

by Guest August 10th 2017, 8:00 pm

Code:: $(function(){ $(function(){ var forum=3568; var elem=$(".news_forum"); if(!elem.length) return; $.get("/t"+forum+"-?view=newest", function(data){ data=$(".postbodyinside", data).last().html(); data=data.replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />"); elem.html(data); }); }); });

Your code was not working because the element was empty. The code to parse the bbcode has to be put in the callback function.

by Kami-sama August 10th 2017, 8:21 pm

Nevermind. After removing the extra

Code:: $(function(){

it worked.

And now this one also needs to be added to the whole news_forum code. (replace link to text). How would that work?

Code:: $(function(){ var links=$(".postbodyinside a"), len=links.length, i=0; for(i;i<len;i++){ if(/png|jpg|jpeg|gif/.test(links.eq(i).attr("href"))){ links.eq(i).replaceWith(links.eq(i).attr("href")); } }; });

by Guest August 10th 2017, 8:41 pm

Code:: $(function(){ var forum=3568; var elem=$(".news_forum"); if(!elem.length) return; $.get("/t"+forum+"-?view=newest", function(data){ data=$(".postbodyinside", data).last().html(); data=data.replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />"); elem.html(data); var links=$(".news_forum a"), len=links.length, i=0; for(i;i<len;i++){ if(/png|jpg|jpeg|gif/.test(links.eq(i).attr("href"))){ links.eq(i).replaceWith(links.eq(i).attr("href")); } } }); });

by Kami-sama August 10th 2017, 8:53 pm

Yeah that did nothing.
I think it has to be done before the initial replacement?
And also maybe it should not take the element newsforum but data instead?

by Guest August 10th 2017, 9:49 pm

Code:: $(function(){ var forum=3568; var elem=$(".news_forum"); if(!elem.length) return; $.get("/t"+forum+"-?view=newest", function(data){ data=$(".postbodyinside", data).last().html(); elem.html(data); var links=$(".news_forum a"), len=links.length, i=0; for(i;i<len;i++){ if(/png|jpg|jpeg|gif/.test(links.eq(i).attr("href"))){ links.eq(i).replaceWith(links.eq(i).attr("href")); } } elem.html(elem.html().replace(/\[temosPavadinimas\]/g, "<br /><span class="PranesimoAntraste"><center>").replace(/\[\/temosPavadinimas\]/g, "</center></span><div class="PranesimoFonas">").replace(/\[temosAprasymas\]/g, "<div class="PranesimoTekstas">").replace(/\[\/temosAprasymas\]/g, "<br />").replace(/\[temosIMG\]/g, "<img style="width: 440px" src="").replace(/\[\/temosIMG\]/g, ""/></div><br /></div><br />")); }); });