Creat function button using BBCodes for new post and post reply

Hello @Ange Tuteur and all,

From topic: Fast BBCodes for Staff in posts on editor, I have a idea for my project.

And I need your help!

I am working on a program that it will be exported to a special BBCode. I have to do many steps to correct the BBCode to get it done. And then post it into my forum.

Step.1, Following topic "Fast BBCodes for Staff in posts on editor", I tried and I got BBCode as per below image:



I call the left of code in Red is A and the right of code in Blue is B.


Step.2, My program will be get code like below:

Code:

[DhtmlXQ][DhtmlXQ_ver]www_dpxq_com[/DhtmlXQ_ver][DhtmlXQ_init]500,350[/DhtmlXQ_init][DhtmlXQ_binit]9999999949999999999999317399999999990241515224999999999999999999[/DhtmlXQ_binit][DhtmlXQ_title]VnChess-Hòa-Unknow 2014-12-28 20_30_45[/DhtmlXQ_title][DhtmlXQ_date]2014-12-28[/DhtmlXQ_date][DhtmlXQ_red]VnChess[/DhtmlXQ_red][DhtmlXQ_black]Unknow[/DhtmlXQ_black][DhtmlXQ_result]和局[/DhtmlXQ_result][DhtmlXQ_movelist]49594132736351506362504062523241594924425251022031414030515042605040[/DhtmlXQ_movelist][DhtmlXQ_type]实战中残局[/DhtmlXQ_type][DhtmlXQ_firstnum]0[/DhtmlXQ_firstnum][DhtmlXQ_refer]http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm[/DhtmlXQ_refer][DhtmlXQ_generator]www.dpxq.com[/DhtmlXQ_generator][/DhtmlXQ]

From the begining of code we have [DhtmlXQ] (I call it "C").
              And at the end we have [/DhtmlXQ] (I call it "D").


Step.3, I also have the code template as per below:

I call it "E"

Code:

<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name='NoFile_[DhtmlXQiFrame]

I call it "F"

Code:

[/DhtmlXQiFrame]'></iframe>

Step.4, What I have to do will be: Replace code "C" by "E" and "D" by "F" that we have in step.2 and Step.3.

At that time we will have full coding that I need per below:

Code:

<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name='NoFile_[DhtmlXQiFrame][DhtmlXQ_ver]www_dpxq_com[/DhtmlXQ_ver][DhtmlXQ_init]500,350[/DhtmlXQ_init][DhtmlXQ_binit]9999999949999999999999317399999999990241515224999999999999999999[/DhtmlXQ_binit][DhtmlXQ_title]VnChess-Hòa-Unknow 2014-12-28 20_30_45[/DhtmlXQ_title][DhtmlXQ_date]2014-12-28[/DhtmlXQ_date][DhtmlXQ_red]VnChess[/DhtmlXQ_red][DhtmlXQ_black]Unknow[/DhtmlXQ_black][DhtmlXQ_result]和局[/DhtmlXQ_result][DhtmlXQ_movelist]49594132736351506362504062523241594924425251022031414030515042605040[/DhtmlXQ_movelist][DhtmlXQ_type]实战中残局[/DhtmlXQ_type][DhtmlXQ_firstnum]0[/DhtmlXQ_firstnum][DhtmlXQ_refer]http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm[/DhtmlXQ_refer][DhtmlXQ_generator]www.dpxq.com[/DhtmlXQ_generator][/DhtmlXQiFrame]'></iframe>

So, now what I need your help is:
- How can we creat a new BBCode button that "A" from step.1 will be replaced by "E" from step.3.
And "B" from step.1 will be replaced by "F" from step.3.
- When we hit this button code will be showed like below ("E" and "F"), then I insert code from step.2.

Code:

<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name='NoFile_[DhtmlXQiFrame][/DhtmlXQiFrame]'></iframe>

One more special request.
Is there anyway when we hit the button the code above is showing, then I insert all the code in step.2 BUT "C" and "D" in step.2 will be auto removed?

Here are the attached files of HTML and JavaScript that I got. Link: SAMPLE.

I do not know about coding and html.

I am waiting for your response.

Thank you very much!
Alex.

Bump.

Happy new year!

Bump.

Hello @AlexisMcDevin,

Do you want a button that inserts iframes ? From what I gathered by this, you're using an iframe to display this game. I had a draft lying around that formats and inserts an iframe into messages, although developed on phpbb3 it can be used on other versions.

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : in all the pages
Paste the code below :

Code:

$(function() {
  for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) if (/content/.test(a[i].className) && /\[\/iframe\]/.test(a[i].innerHTML)) a[i].innerHTML = a[i].innerHTML.replace(/\[iframe\((.*?)px,(.*?)px\) src="(.*?)"\]\[\/iframe\]/g,'<iframe class="post_frame" width="$1" height="$2" src="$3"></iframe>');
  $(function() {
    if (!document.getElementById('text_editor_textarea')) return;
    $('.sceditor-button-link').after('<a class="sceditor-button sceditor-button-iframe" title="Insert an iframe"><div style="background-image:url(http://i38.servimg.com/u/f38/18/21/60/73/iframe10.gif)"></div></a>');
    $('body').append('<div class="sceditor-dropdown sceditor-insertframe" style="display:none"><div><div><label>URL:</label><input id="frameurl" class="url" placeholder="http://" type="text"></div><div><label>Width (optional):</label><input id="framewidth" style="width:100px" min="0" type="number"></div><label>Height (optional):</label><input id="frameheight" style="width:100px" min="0" type="number"></div><div><input value="Insert" class="button" type="button"></div></div></div>');
   
    var popup = $('.sceditor-insertframe'), button = $('.sceditor-button-iframe'), url = $('#frameurl'), w = $('#framewidth'), h = $('#frameheight');
    button.click(function() {
      popup.css({
        'left' : button.offset().left + 'px',
        'top' : button.offset().top + 25 + 'px'
      });
      if (popup.css('display') == 'none') popup.show();
      else popup.hide();
    });
    $('.sceditor-insertframe .button').click(function() {
      if (url.val().length < 1) return;
      var width = '800px', height = '560px';
     
      if (w.val() > 1) width = w.val() + 'px';
      if (h.val() > 1) height = h.val() + 'px';
     
      $('#text_editor_textarea').sceditor('instance').insertText('[iframe('+width+','+height+') src="'+url.val()+'"]','[/iframe]');
      popup.hide(), url.val('');
    });
    $('.sceditor-button-source').click(function() { popup.removeClass('disabled') }); $('.sceditor-button').not('.sceditor-button-iframe').click(function() { popup.hide() });$('.sceditor-container textarea').focus(function() { popup.hide() });$('.sceditor-container iframe').contents().mousedown(function() { popup.hide() });
  });
});

Should give you the following results :



The name attribute holds some additional data, do you want this to be added into the drop down so it can be formatted ?

Hello @Ange Tuteur,

Thank you for your response!
Yes, you are right. I want to have a button to insert iframe code.

I got the button after applied your code in Javascript. I do not know how to explain to you but if we press the button and small table show up to insert my game's code. This game will not display. It is wrong way.

How can we have a button that after press it, the code will be displayed per below? And the mouse pointer (cursor) will be inserted between green and yellow.

<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name='NoFile_[DhtmlXQiFrame][/DhtmlXQiFrame]'></iframe>

If we can do the iframe code show up per my request above, 80 percent of this problem has been solved.

Once we have this done, I will paste my game's code between green and yellow.

Below is a full game's code that I alway have.

[DhtmlXQ][DhtmlXQ_ver]www_dpxq_com[/DhtmlXQ_ver][DhtmlXQ_init]500,350[/DhtmlXQ_init][DhtmlXQ_binit]9999999949999999999999317399999999990241515224999999999999999999[/DhtmlXQ_binit][DhtmlXQ_title]VnChess-Hòa-Unknow 2014-12-28 20_30_45[/DhtmlXQ_title][DhtmlXQ_date]2014-12-28[/DhtmlXQ_date][DhtmlXQ_red]VnChess[/DhtmlXQ_red][DhtmlXQ_black]Unknow[/DhtmlXQ_black][DhtmlXQ_result]和局[/DhtmlXQ_result][DhtmlXQ_movelist]49594132736351506362504062523241594924425251022031414030515042605040[/DhtmlXQ_movelist][DhtmlXQ_type]实战中残局[/DhtmlXQ_type][DhtmlXQ_firstnum]0[/DhtmlXQ_firstnum][DhtmlXQ_refer]http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm[/DhtmlXQ_refer][DhtmlXQ_generator]www.dpxq.com[/DhtmlXQ_generator][/DhtmlXQ]

Please do not mention to blue in this code. We only need to discuss about Pink and Orange.

Now, I have to delete Pink and Orange manually. And then, copy and paste Bue into betwewn green and yellow.

Anyway, if I do not have to manual deleted Pink and Orange however, Pink and Orange will automatic vanished (or replace by nothing). It will be the best!

Finally, all iframe code I need to display will be green blue yellow.

<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name='NoFile_[DhtmlXQiFrame][DhtmlXQ_ver]www_dpxq_com[/DhtmlXQ_ver][DhtmlXQ_init]500,350[/DhtmlXQ_init][DhtmlXQ_binit]9999999949999999999999317399999999990241515224999999999999999999[/DhtmlXQ_binit][DhtmlXQ_title]VnChess-Hòa-Unknow 2014-12-28 20_30_45[/DhtmlXQ_title][DhtmlXQ_date]2014-12-28[/DhtmlXQ_date][DhtmlXQ_red]VnChess[/DhtmlXQ_red][DhtmlXQ_black]Unknow[/DhtmlXQ_black][DhtmlXQ_result]和局[/DhtmlXQ_result][DhtmlXQ_movelist]49594132736351506362504062523241594924425251022031414030515042605040[/DhtmlXQ_movelist][DhtmlXQ_type]实战中残局[/DhtmlXQ_type][DhtmlXQ_firstnum]0[/DhtmlXQ_firstnum][DhtmlXQ_refer]http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm[/DhtmlXQ_refer][DhtmlXQ_generator]www.dpxq.com[/DhtmlXQ_generator][/DhtmlXQiFrame]'></iframe>

Once HTML turn on, Game will be displayed like below image.


I really need your help on this!

I am sorry to use many colors on this post.

Thank you very much!
Alex.

Replace the current script with this :

Code:

$(function() {
  $(function() {
    if (!document.getElementById('text_editor_textarea')) return;
    $('.sceditor-button-link').after('<a class="sceditor-button sceditor-button-iframe" title="Insert an iframe"><div style="background-image:url(http://i38.servimg.com/u/f38/18/21/60/73/iframe10.gif)"></div></a>');
 
    var button = $('.sceditor-button-iframe');
    button.click(function() {
      $('#text_editor_textarea').sceditor('instance').insertText('<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name="NoFile_[DhtmlXQiFrame]','[/DhtmlXQiFrame]"></iframe>');
    });
    $('.sceditor-button-source').click(function() { button.removeClass('disabled') });
  });
});

Also, does this always stay the same ?

Code:

[DhtmlXQ_ver]www_dpxq_com[/DhtmlXQ_ver][DhtmlXQ_init]500,350[/DhtmlXQ_init][DhtmlXQ_binit]9999999949999999999999317399999999990241515224999999999999999999[/DhtmlXQ_binit][DhtmlXQ_title]VnChess-Hòa-Unknow 2014-12-28 20_30_45[/DhtmlXQ_title][DhtmlXQ_date]2014-12-28[/DhtmlXQ_date][DhtmlXQ_red]VnChess[/DhtmlXQ_red][DhtmlXQ_black]Unknow[/DhtmlXQ_black][DhtmlXQ_result]和局[/DhtmlXQ_result][DhtmlXQ_movelist]49594132736351506362504062523241594924425251022031414030515042605040[/DhtmlXQ_movelist][DhtmlXQ_type]实战中残局[/DhtmlXQ_type][DhtmlXQ_firstnum]0[/DhtmlXQ_firstnum][DhtmlXQ_refer]http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm[/DhtmlXQ_refer][DhtmlXQ_generator]www.dpxq.com[/DhtmlXQ_generator]

If so, we can add it into the script. Otherwise, you will have to do manually.

Hello @Ange Tuteur,

Basically, my game's code only changes in red noted below. There is game's information per: Tittle, time, name, move list, result, two game players.

Click here:

The other things will be the same. That why I want to make it as per a BBCode template. I am not a programer, So there are something very difficult to explain.

In the first post, I attached a document. That is a open source of this game which has been translated into English. I do not know what we can do with this.

It seems that I must have a private hosting to upload that document. After that, we need to connect this document to my forum. Maybe we have to know about HTML as well.

At the moment, the BBcode that you provided working very well. Only I have to select and delete original code manual.

Is there anyway to make showing code shorter?
For Example:
When we hit the button, BBCode will be showed like below.

Clik here:

If we can change the Green with a short word like [Chess] and Blue with [/Chess]. At that time we will have [Chess][/Chess]. It is shorter and looks really like BBcode. But please be sure that all functions of shorter BBcode will not be changed. It must be work as per long BBcode that you provided.

If you have any better ideas, please let me know.

Thank you very much!
Aex.

Try this :

Code:

$(function() {
  var icon = 'http://i38.servimg.com/u/f38/18/21/60/73/iframe10.gif';
  for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) if (/content/.test(a[i].className) && /\[\/chess\]/.test(a[i].innerHTML)) a[i].innerHTML = a[i].innerHTML.replace(/\[chess\](.*?)\[\/chess\]<\/a>/ig,'<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name="NoFile_[DhtmlXQiFrame]($1)[/DhtmlXQiFrame]"></iframe>');
  $(function() {
    if (!document.getElementById('text_editor_textarea')) return;
    $('.sceditor-button-link').after('<a class="sceditor-button sceditor-button-iframe" title="Insert an iframe"><div style="background-image:url('+icon+')"></div></a>');
 
    var button = $('.sceditor-button-iframe');
    button.click(function() {
      $('#text_editor_textarea').sceditor('instance').insertText('[chess]','[/chess]');
    });
    $('.sceditor-button-source').click(function() { button.removeClass('disabled') });
  });
});

You can change the button image by replacing https://i.servimg.com/u/f38/18/21/60/73/iframe10.gif with your own if you like. As far as getting the code, I'm not sure, especially if it constantly changes.

Hi @Ange Tuteur,

I seem that you were useing or uploading html somewhere, right? Sorry for stupid question but when I try to change something in your code, it does not work.

With your code, I have to test more. Sometime it's work, sotime doesn't work with different game's code.

With below code, everything works very well. And I can change a little bit on this if needed. Only thing that it looks too long.

Code:

$(function() {
  $(function() {
    if (!document.getElementById('text_editor_textarea')) return;
    $('.sceditor-button-link').after('<a class="sceditor-button sceditor-button-iframe" title="Insert an iframe"><div style="background-image:url(http://i38.servimg.com/u/f38/18/21/60/73/iframe10.gif)"></div></a>');
 
    var button = $('.sceditor-button-iframe');
    button.click(function() {
      $('#text_editor_textarea').sceditor('instance').insertText('<iframe src="http://www.dpxq.com/DhtmlXQ_www_dpxq_com/DhtmlXQ_www_dpxq_com.htm" frameborder="0" scrolling="no" width="800" height="560" style="width:800px;height:560px;" name="NoFile_[DhtmlXQiFrame]','[/DhtmlXQiFrame]"></iframe>');
    });
    $('.sceditor-button-source').click(function() { button.removeClass('disabled') });
  });
});

Let me know if you have any better ideas.

Thank you!
Alex.

is this problem solved as it is marked as so if no please let us know so we can change the solved icon back to something else

Hi @APE,

Solved!