成为VIP演示截图
从 CodePen 直接复制放在后台就可以了，需要（HTML折叠、轮播）演示代码的可以在我的网站获取。
后台框架
代码内容
// 自定义HTML代码小工具
Zib_CFSwidget::create('custom_html_widget',array('title'=>'HTML代码','zib_title'=>true,'zib_affix'=>true,'zib_show'=>true,'description'=>'直接输出HTML代码，不进行任何检查','fields'=>array(array('id'=>'widget_enable','type'=>'switcher','title'=>'启用小工具','label'=>'关闭后整个小工具将不会显示','default'=>true),array('id'=>'html_code','type'=>'code_editor','title'=>'HTML代码','subtitle'=>'直接输入HTML代码，将原样输出，不进行任何检查','settings'=>array('theme'=>'dracula'),'sanitize'=>false,'default'=>'','dependency'=>array('widget_enable','==','true')),array('id'=>'compress_html','type'=>'switcher','title'=>'压缩HTML代码','label'=>'移除多余空格和换行，减少页面大小','default'=>false,'dependency'=>array('widget_enable','==','true')),array('id'=>'use_zib_box','type'=>'switcher','title'=>'使用子比背景','default'=>true,'dependency'=>array('widget_enable','==','true')),array('id'=>'text_center','type'=>'switcher','title'=>'内容居中显示','default'=>false,'dependency'=>array('widget_enable','==','true')),array('id'=>'display_height','type'=>'text','title'=>'显示高度','subtitle'=>'留空不限制，可输入如：300px、50vh等','default'=>'','dependency'=>array('widget_enable','==','true')),array('id'=>'scale_ratio','type'=>'spinner','title'=>'缩放比例','subtitle'=>'调整内容显示大小，100为原始大小','default'=>100,'min'=>10,'max'=>500,'step'=>5,'unit'=>'%','dependency'=>array('widget_enable','==','true')),array('id'=>'style_isolation','type'=>'switcher','title'=>'样式隔离','label'=>'防止内部样式影响全局（使用iframe隔离）','default'=>false,'dependency'=>array('widget_enable','==','true')))));
function custom_html_widget_compress($html){$protected=array();$html=preg_replace_callback('/<(pre|textarea|script)[^>]*>.*?</1>/is',function($matches)use(&$protected){$placeholder='___PROTECTED_'.count($protected).'___';$protected[$placeholder]=$matches[0];return $placeholder;},$html);$html=preg_replace('/<!--(?![ifs).*?-->/s','',$html);$html=preg_replace('/s+/',' ',$html);$html=preg_replace('/>s+</','><',$html);$html=trim($html);foreach($protected as $placeholder=>$content){$html=str_replace($placeholder,$content,$html);}return $html;}
function custom_html_widget($args,$instance){if(empty($instance['widget_enable']))return;$show_class=Zib_CFSwidget::show_class($instance);if(!$show_class)return;$html_code=!empty($instance['html_code'])?$instance['html_code']:'';if(empty($html_code))return;$compress_html=!empty($instance['compress_html']);$use_zib_box=!empty($instance['use_zib_box']);$text_center=!empty($instance['text_center']);$display_height=!empty($instance['display_height'])?trim($instance['display_height']):'';$style_isolation=!empty($instance['style_isolation']);$scale_ratio=isset($instance['scale_ratio'])?intval($instance['scale_ratio']):100;if($compress_html)$html_code=custom_html_widget_compress($html_code);$class='mb20';if($use_zib_box){Zib_CFSwidget::echo_before($instance,$class,$args);echo'<div class="zib-widget custom-html-widget'.($text_center&&!$style_isolation?' text-center':'').'">';}else{$wrapper_class=$text_center&&!$style_isolation?' text-center':'';echo'<div class="'.$class.' custom-html-widget'.$wrapper_class.'">';}if($style_isolation){custom_html_widget_render_iframe($html_code,$text_center,$display_height,$scale_ratio);}else{custom_html_widget_render_direct($html_code,$display_height,$scale_ratio);}echo'</div>';if($use_zib_box)Zib_CFSwidget::echo_after($instance,$args);}
function custom_html_widget_render_iframe($html_code,$text_center,$display_height,$scale_ratio){$iframe_style='width:100%;border:none;display:block;';$has_fixed_height=!empty($display_height);if($has_fixed_height)$iframe_style.='height:'.esc_attr($display_height).';overflow:auto;';$body_styles=array('margin:0','padding:0');if($scale_ratio!=100)$body_styles[]='zoom:'.($scale_ratio/100);if($text_center)$body_styles[]='text-align:center';$body_style_str=implode(';',$body_styles);$extra_styles=$text_center?'<style>*{text-align:center!important}img,div,p,span{margin-left:auto!important;margin-right:auto!important}</style>':'';$iframe_html='<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html,body{'.$body_style_str.'}</style>'.$extra_styles.'</head><body>'.$html_code.'</body></html>';$onload=!$has_fixed_height?' onload="this.style.height=this.contentWindow.document.documentElement.scrollHeight+'px'"':'';echo'<iframe style="'.$iframe_style.'" srcdoc="'.esc_attr($iframe_html).'"'.$onload.'></iframe>';}
function custom_html_widget_render_direct($html_code,$display_height,$scale_ratio){$styles=array();if(!empty($display_height)){$styles[]='height:'.esc_attr($display_height);$styles[]='overflow:auto';}if($scale_ratio!=100)$styles[]='zoom:'.($scale_ratio/100);$style_attr=!empty($styles)?' style="'.implode(';',$styles).'"':'';echo'<div class="custom-html-content"'.$style_attr.'>'.$html_code.'</div>';}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)