给文章编辑器添加彩色框功能

  • A+
所属分类:建博笔记

一、效果预览

  • 后台效果预览:

给文章编辑器添加彩色框功能

  • 前台效果预览:

彩色框--绿
彩色框--红
彩色框--灰
彩色框--黄
彩色框--蓝

 

二、添加彩色框函数

打开inc/inc.php文件,在适当位置添加

  1. // 彩色框
  2. function zm_green($atts$content=null){
  3.     return '<div class="mark_green mark">'.$content.'</div>';
  4. }
  5. add_shortcode('mark_green', 'zm_green');
  6. function zm_red($atts$content=null){
  7.     return '<div class="mark_red mark">'.$content.'</div>';
  8. }
  9. add_shortcode('mark_red','zm_red');
  10. function zm_gray($atts$content=null){
  11.     return '<div class="mark_gray mark">'.$content.'</div>';
  12. }
  13. add_shortcode('mark_gray','zm_gray');
  14. function zm_yellow($atts$content=null){
  15.     return '<div class="mark_yellow mark">'.$content.'</div>';
  16. }
  17. add_shortcode('mark_yellow','zm_yellow');
  18. function zm_blue($atts$content=null){
  19.     return '<div class="mark_blue mark">'.$content.'</div>';
  20. }
  21. add_shortcode('mark_blue','zm_blue');

这里,我只添加了五个彩色框,你可以根据自己的需要按照同样的方式添加更多的彩色框。

 

三、 添加彩色框调用函数

在同文件中,搜索

  1. // 添加按钮
  2. function begin_select(){

用下面的代码替换这个函数

  1. // 添加按钮
  2. function begin_select(){
  3.     echo '
  4.         <select id="sc_select">
  5.             <option value="您需要选择一个短代码">插入短代码</option>
  6.             <option value="【url href=链接地址]按钮名称[/url】">链接按钮</option>
  7.             <option value="【button]按钮名称[/button】">弹窗按钮</option>
  8.             <option value="【videos href=视频代码]图片链接[/videos】">添加视频</option>
  9.             <option value="【img]插入图片[/img】">添加相册</option>
  10.             <option value="【full_img]插入宽图[/full_img】">插入宽图</option>
  11.             <option value="【reply]隐藏的内容[/reply】">回复可见</option>
  12.             <option value="【login]隐藏的内容[/login】">登录可见</option>
  13.             <option value="【password key=密码]加密的内容[/password】">密码保护</option>
  14.             <option value="【code]代码[/code】">添加代码</option>
  15.             <option value="【s】【p】隐藏的文字【/p】">文字折叠</option>
  16.             <option value="<fieldset><legend>我是标题</legend>这里是内容</fieldset>">fieldset标签</option>
  17.             <option value="【ad】">插入广告</option>
  18.         </select>
  19.         <select id="sc_select_mark">
  20.             <option value="您需要选择一种彩色框">插入彩色框</option>
  21.             <option value="【mark_green]彩色框--绿[/mark_green】">彩色框--绿</option>
  22.             <option value="【mark_red]彩色框--红[/mark_red】">彩色框--红</option>
  23.             <option value="【mark_gray]彩色框--灰[/mark_gray】">彩色框--灰</option>
  24.             <option value="【mark_yellow]彩色框--黄[/mark_yellow】">彩色框--黄</option>
  25.             <option value="【mark_blue]彩色框--蓝[/mark_blue】">彩色框--蓝</option>
  26.         </select>';
  27. }

代码说明:

  • 第一个<select></select>选项卡中的那些<option></option>标签是你原来的内容。因为我增加了其他标签,所以可能会比你的多一些。如果你没有哪个标签,就删掉哪行
  • 第二个<select></select>为新增的彩色框选项卡。如果你添加了不止五个彩色框,在第二个<select></select>中按格式添加对应的<option></option>标签即可
  • 使用时,请将代码中的【】替换为[]

 

四、添加彩色框执行脚本

在同文件中搜索

  1. function begin_button() {

用下面的代码替换原来的函数

  1. function begin_button() {
  2.     echo '
  3.         <script type="text/javascript">
  4.             jQuery(document).ready(function(){
  5.                 jQuery("#sc_select").change(function() {
  6.                     send_to_editor(jQuery("#sc_select :selected").val());
  7.                     return false;
  8.                 });
  9.                 jQuery("#sc_select_mark").change(function() {
  10.                     send_to_editor(jQuery("#sc_select_mark :selected").val());
  11.                     return false;
  12.                 });
  13.             });
  14.         </script>';
  15. }

 

五、添加彩色框显示样式

打开style.css文件,搜索

  1. /** 收藏 **/
  2. .favorite-box {
  3.     text-aligncenter;
  4.     margin35px 0;
  5. }

在其上面添加

  1. /** 彩色框 **/
  2. .mark {
  3.     color#444;
  4.     margin: 0 0 8px 0;
  5.     padding5px 10px;
  6.     border-radius: 2px;
  7. }
  8. .mark_green {
  9.     background#ecf2d6;
  10. }
  11. .mark_red {
  12.     background#ffecea;
  13. }
  14. .mark_gray {
  15.     background#f1f1f1;
  16. }
  17. .mark_yellow {
  18.     background#fff4b9;
  19. }
  20. .mark_blue {
  21.     background#c4e7f7;
  22. }

同样的,如果你添加了更多的彩色框,则需要添加对应的样式。彩色框的背景色根据自己喜好修改。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: