Adding a button to the html editor (textarea): PHPFusion 9 Support

Navigation

Home
Search

Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.

Adding a button to the html editor (textarea)

Last updated on 5 years ago

Track thread Print

zizubMember

Posted 5 years ago

0

Adding a button to the html editor (textarea) in new PHPFusion 9, xx. Open the file ../includes/html_buttons_include.php and add the code for the new button.
Sample code. Buttons that work for me in pf-9

Ul button

Code Download source

 $res .= "<input type='button' type='button' class='btn btn-sm btn-default m-b-10 button' value='ul' title='UL for the list' onclick=\"addText('".$textarea."', '<ul>', '</ul>', '".$formname."');\">\n";

Li button

Code Download source

 $res .= "<input type='button' type='button' class='btn btn-sm btn-default m-b-10 button' value='li' title='Li list' onclick=\"addText('".$textarea."', '<li>', '</li>', '".$formname."');\">\n";

Awesome download icon for file links

Code Download source

 $res .= "<button type='button' value='download' title='Download Link Style' class='btn btn-sm btn-default m-b-10 button' onclick=\"addText('".$textarea."', '<span class=\'fas fa-download\'>', '</span>', '".$formname."');\"><span class='fas fa-download'></span></button>\n";

DIV block with custom css

Code Download source

 $res .= "<button type='button' value='div css' title='Div css for link block download' class='btn btn-sm btn-default m-b-10 button' onclick=\"addText('".$textarea."', '<div class=\'dw-block\'>', '</div>', '".$formname."');\">div css</button>\n";

YouTube button

Code Download source

 $res .= "<button type='button' value='YouTube' title='Insert iframe videos from YouTube' class='btn btn-sm btn-default m-b-10 button' onclick=\"addText('".$textarea."', '<iframe width=\'560\' height=\'315\' src=\'https://www.youtube.com/embed/XXXXX?rel=0&showinfo=0', '\' frameborder=\'0\' allowfullscreen></iframe>', '".$formname."');\"><i class='fab fa-youtube'></i></button>\n";

Instead of XXXXX, insert the id of the video. Such a video will not display well on small mobile screens.

Edited by zizub on 29-02-2020 18:22, 5 years ago

1 user reacted to this post

Falk

zizubMember

Posted 5 years ago

0

Button with two div's for responsive videos from YouTube and HTML5 Video

Code Download source

 $res .= "<button type='button' value='div video' title='Video container' class='btn btn-sm btn-default m-b-10 button' onclick=\"addText('".$textarea."', '&lt;div class=\'outer-wrapper\'&gt;&lt;div class=\'video-container\'&gt;', '&lt;/div&gt;&lt;/div&gt;', '".$formname."');\">div video</button>\n";

HTML

Code Download source

<div class='outer-wrapper'><div class='video-container'> Insert iframe YouTube or HTML5 Video here </div></div>

CSS

Code Download source

.outer-wrapper {

 width: 100%;

 max-width: 560px;

 margin: 0 0 10px;

}

.video-container {

 height: 0;

 margin: auto;

 z-index: 1;

 position: relative;

 padding-top: 25px;

 padding-bottom: 56.25%;

 display: block;

 overflow: hidden;

}

 iframe, video {

 display: block;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

 z-index: 5;

 position: absolute;

 }

For me, this is a good solution. I need the player to not be full-width on the desktop monitor. max-width: 560px; in outer-wrapper allows me to control the size.

You can view all discussion threads in this forum.
You cannot start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
You cannot set up a bounty in this discussion thread.

Moderator: Support Team

Users who participated in discussion: zizub