• 欢迎访问爱玩吧
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏爱玩吧

【zblog】教你怎么在Zblog博客上实现短代码功能

建站资源 aiwanyule 6年前 (2016-05-11) 463次浏览 已收录 0个评论

教你怎么在Zblog博客上实现短代码功能

wp上有不少短代码插件,于是也想在自己的博客中弄。看了一下zblog,后台已经有不错的UE编辑器了,再去弄短代码感觉有点浪费时间,就直接在UE上加上实现,这样做还有一个好处,可以立刻显示出效果来。

制作起来也比较简单,首先定义好一些css代码,例如要实现上面的黄色框框,在css上定义

p.黄色文本框{
    text-indent: 0em;
    color: #ad9948;
    background: #fff4b9 url('images/wpgo_sc_warn.png') -1px -1px no-repeat;
    border: 1px solid #eac946;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}

接下来是在UE中增加按钮:

var sf_shortcode_icon=[];
sf_shortcode_icon['绿色文本框']="background-position: -440px 0px;background-color: #ecf2d6;";
sf_shortcode_icon['红色文本框']="background-position: -440px 0px;background-color: #ffecea;";
sf_shortcode_icon['黄色文本框']="background-position: -440px 0px;background-color: #fff4b9;";
sf_shortcode_icon['灰色文本框']="background-position: -440px 0px;background-color: #eaeaea;";
sf_shortcode_icon['蓝色标题']="background-position: -400px -20px;";
UE.registerUI('绿色文本框 红色文本框 黄色文本框 灰色文本框 蓝色标题', function(editor, uiname) {
    var btn = new UE.ui.Button({
        name: uiname,
        title: uiname,
        cssRules: sf_shortcode_icon[uiname],
        //点击时执行的命令
        onclick: function() {
            var range = editor.selection.getRange();
            range.select();
            var txt = editor.selection.getText();
            if(txt==null || txt==""){
                txt="<br/>";
            }
            editor.execCommand('insertHtml', '<p class="'+uiname+'">'+txt+'</p>');
        }
    });
    return btn;
});

如此一来,就能在点击按钮的时候添加指定class的p标签了,是不是很简单?

div

最后看看这样的效果啦,没什么其他的东东了,来张截图吧

【zblog】教你怎么在Zblog博客上实现短代码功能


爱玩吧 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:【zblog】教你怎么在Zblog博客上实现短代码功能
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址