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

教你怎么在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

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