为confluence编辑器增加设置字体和设置字号的选项

Confluence的编辑器没有设置字体和设置字号的功能，通过自定义宏来实现不是很好用，下面给出一个较好的解决方案，使用confluence的自定义html功能，在body尾部加入以下代码：(针对Confluence 5.4.3，其他版本可参照本文思路稍加改造，要会使用firebug的元素查看器以及jquery)

<script type="text/javascript" src="http://192.168.10.204:8090/includes/js/rangy-1.2.3/log4javascript.js"></script>
<script type="text/javascript" src="http://192.168.10.204:8090/includes/js/rangy-1.2.3/rangy-core.js"></script>
<script type="text/javascript" src="http://192.168.10.204:8090/includes/js/rangy-1.2.3/textcommands.js"></script>

<script>
 rangy.init();
/**
 * 以下js扩展是对edit编辑器进行扩展，增加了设置字体和字号的功能！
 */
// 获取frame的document兼容火狐ie
function getIFrameDOM(id){
        return document.getElementById(id).contentDocument || document.frames[id].document;
}

// 增加字体和字体大小选项
var selectors = $($(‘.aui-buttons‘, ‘.aui-toolbar2-primary‘)[0]);
var fontSelect = $(‘<select  class="toolbar-trigger aui-dd-trigger aui-button"> id="font-face"><option value="">选择字体</option><option value="SimSun">宋体</option><option value="FangSong_GB2312">仿宋_GB2312</option><option value="SimHei">黑体</option><option value="KaiTi_GB2312">楷体_GB2312</option><option value="LiSu">隶书</option><option value="YouYuan">幼圆</option><option value="Microsoft YaHei">微软雅黑</option><option value="Courier New">Courier New</option><option value="Times New Roman">Times New Roman</option><option value="Impact">Impact</option><option value="Georgia">Georgia</option><option value="Arial">Arial</option><option value="Verdana">Verdana</option><option value="Tahoma">Tahoma</option></select>‘);

var sizeSelect = $(‘<select  class="toolbar-trigger aui-dd-trigger aui-button"> id="font-size"><option value="">选择字号</option><option value="12px">12px</option><option value="14px">14px</option><option value="18px">18px</option><option value="24px">24px</option><option value="36px">36px</option><option value="48px">48px</option><option value="56px">56px</option></select>‘);

selectors.append(fontSelect);
selectors.append(sizeSelect);

// 替换当前选中内容
function replaceContext(opts){
    var document = getIFrameDOM(‘wysiwygTextarea_ifr‘);

    rangy.execSelectionCommand("font",document,1,opts);
}
fontSelect.change(function(){
     replaceContext({name:fontSelect.val()});
});
sizeSelect.change(function(){
     replaceContext({size:sizeSelect.val()});
});

</script>

rangy下载链接http://download.csdn.net/download/keydot2007/7070635(textcommands.js做了扩展)

为confluence编辑器增加设置字体和设置字号的选项,布布扣,bubuko.com

为confluence编辑器增加设置字体和设置字号的选项

原文：http://blog.csdn.net/keydot2007/article/details/21605411