The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Creat function button using BBCodes for new post and post reply

3 posters

Go down

Solved Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin December 30th 2014, 9:38 am

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:

Creat function button using BBCodes for new post and post reply 10881726_689197614527517_5944907291755343312_n

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.


Last edited by AlexisMcDevin on January 6th 2015, 3:02 pm; edited 1 time in total
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 1st 2015, 12:03 am

Bump.

Happy new year!
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 1st 2015, 3:18 pm

Bump.
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by Ange Tuteur January 2nd 2015, 2:24 am

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 :
Creat function button using BBCodes for new post and post reply Captur16
Creat function button using BBCodes for new post and post reply Captur17

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

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 2nd 2015, 5:00 am

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.
Creat function button using BBCodes for new post and post reply 10402597_691915387589073_347446818197264834_n

I really need your help on this!

I am sorry to use many colors on this post.

Thank you very much!
Alex.
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by Ange Tuteur January 2nd 2015, 6:14 am

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 2nd 2015, 11:08 am

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.
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by Ange Tuteur January 2nd 2015, 11:53 am

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 3rd 2015, 1:33 am

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.
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by Ape January 10th 2015, 6:09 pm

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


Creat function button using BBCodes for new post and post reply Left1212Creat function button using BBCodes for new post and post reply Center11Creat function button using BBCodes for new post and post reply Right112
Creat function button using BBCodes for new post and post reply Ape_b110
Creat function button using BBCodes for new post and post reply Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19075
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by AlexisMcDevin January 10th 2015, 10:10 pm

Hi @APE,

Solved!
AlexisMcDevin
AlexisMcDevin
Forumember

Male Posts : 134
Reputation : 5
Language : English

http://ccxiqi.forumvi.com/

Back to top Go down

Solved Re: Creat function button using BBCodes for new post and post reply

Post by Ange Tuteur January 10th 2015, 11:23 pm

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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