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.
Sign In
Not a member yet? Click here to register.

Adding a button to the html editor (textarea)

Adding a button to the html editor (textarea) in new PHP-Fusion 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
CodeDownload  
 $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
CodeDownload  
 $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
CodeDownload  
 $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
CodeDownload  
 $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
CodeDownload  
 $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.
Button with two div's for responsive videos from YouTube and HTML5 Video
CodeDownload  
 $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
CodeDownload  
<div class='outer-wrapper'><div class='video-container'> Insert iframe YouTube or HTML5 Video here </div></div>


CSS
CodeDownload  
.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.
Thread Information
Author
Replies
2 posts
Views
383 times
Last Post
Last updated on 4 months ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can 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.
Users who participated in discussion: zizub