您的位置:首页 > 产品设计 > UI/UE

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

2014-03-20 11:46 447 查看
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库,关于rangy资料可自行查找资料了解,这里不做介绍)

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: