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

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

一、效果预览

  • 后台效果预览:

  • 前台效果预览:

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

 

二、添加彩色框函数

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

// 彩色框
function zm_green($atts, $content=null){
    return '<div class="mark_green mark">'.$content.'</div>';
}
add_shortcode('mark_green', 'zm_green');
function zm_red($atts, $content=null){
    return '<div class="mark_red mark">'.$content.'</div>';
}
add_shortcode('mark_red','zm_red');
function zm_gray($atts, $content=null){
    return '<div class="mark_gray mark">'.$content.'</div>';
}
add_shortcode('mark_gray','zm_gray');
function zm_yellow($atts, $content=null){
    return '<div class="mark_yellow mark">'.$content.'</div>';
}
add_shortcode('mark_yellow','zm_yellow');
function zm_blue($atts, $content=null){
    return '<div class="mark_blue mark">'.$content.'</div>';
}
add_shortcode('mark_blue','zm_blue');

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

 

三、 添加彩色框调用函数

在同文件中,搜索

// 添加按钮
function begin_select(){

用下面的代码替换

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

代码说明:

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

 

四、添加彩色框执行脚本

在同文件中搜索

function begin_button() {

用下面的代码替换

function begin_button() {
    echo '
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#sc_select").change(function() {
                    send_to_editor(jQuery("#sc_select :selected").val());
                    return false;
                });
                jQuery("#sc_select_mark").change(function() {
                    send_to_editor(jQuery("#sc_select_mark :selected").val());
                    return false;
                });
            });
        </script>';
}

 

五、添加彩色框显示样式

打开【style.css】文件,找到代码

/** 收藏 **/
.favorite-box {
    text-align: center;
    margin: 35px 0;
}

在其上面添加

/** 彩色框 **/
.mark {
    color: #444;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 2px;
}

.mark_green {
    background: #ecf2d6;
}

.mark_red {
    background: #ffecea;
}

.mark_gray {
    background: #f1f1f1;
}

.mark_yellow {
    background: #fff4b9;
}

.mark_blue {
    background: #c4e7f7;
}

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

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

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