百度编辑器增加标签插入例:code

首先我们打开

ueditor.all.js 有的引入的是ueditor.all.min.js文件,要注意修改

themes\default\css\ueditor.css //这个可以不要,默认是有个图标的,如果你需要改个好看点的图标可以设置下

首先ueditor.all.js

拉到末尾

结束标记前增加

UE.registerUI('code', function(editor, uiName) {
    var btn = new UE.ui.Button({
        name: "code",
        title: "设为代码",
        cssRules: 'background-position: center center;',
        onclick: function() {
            editor.execCommand('code');
        }
    });
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    return btn;
});

查找basestyles增加code

var basestyles = {
    'bold':['strong','b'],
    'italic':['em','i'],
    'subscript':['sub'],
    'superscript':['sup'],
    //这一行就是我们添加的code功能,注意上面一行末尾加上 " , "
    'code':['code']
}

2、css文件,可以不加

增加

.edui-for-code .edui-box.edui-icon.edui-default {    
background: url(../images/code.png) no-repeat transparent;    
background-size: 15px 15px;    
background-position: center center;
}

如果加了这css,一定要记得自己把图标放进去

image.png如果没图标就这样!

看下效果图

image.png

注明:需要如图显示在后端,需要修改\ueditor\themes\iframe.css 增加code的css属性!

相关内容

发表评论

验证码:
点击我更换图片

最新评论