The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Adding extra button to post editor - topic template

View previous topic View next topic Go down

Solved Adding extra button to post editor - topic template

Post by Kami-sama on 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:

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?


Last edited by Kami-sama on August 10th 2017, 10:12 pm; edited 3 times in total
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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?
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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.


Last edited by Wolfuryo on August 10th 2017, 3:46 pm; edited 1 time in total (Reason for editing : I'm an idiot. Kidding)
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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?


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 -.-
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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?
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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]
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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 />"));
          }
        });


Last edited by Wolfuryo on August 10th 2017, 5:57 pm; edited 3 times in total
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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:



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"/>
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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.
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

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

Beautiful!

This is SOLVED.
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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...
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on August 10th 2017, 7:41 pm

Post the last post script here.
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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 />"));
  }
});

 
});
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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.
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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"));
    }
  };
});
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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"));
    }
}
        });
        });
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on 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?
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on 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 />"));
});
});
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Kami-sama on August 10th 2017, 10:12 pm

Boom. GOLD.

I get it how you did it Smile
You populated the data and then replaced element HTML.
Slowly learning :DD THANK YOU
avatar
Kami-sama
Forumember

Female Posts : 312
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by Justice™ on August 10th 2017, 10:16 pm

@Kami-sama wrote:Boom. GOLD.

I get it how you did it Smile
You populated the data and then replaced element HTML.
Slowly learning :DD THANK YOU
Awesome! Super This topic already got 2 big pages Razz
Edit:It's actually a single page, I messed up topics again Laughing
avatar
Justice™
Forumember

Posts : 481
Reputation : 113
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Adding extra button to post editor - topic template

Post by SLGray on August 10th 2017, 10:19 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39578
Reputation : 2655
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum