为confluence编辑器增加设置字体和设置字号的选项
2014-03-20 11:46
447 查看
Confluence的编辑器没有设置字体和设置字号的功能,通过自定义宏来实现不是很好用,下面给出一个较好的解决方案,使用confluence的自定义html功能,在body尾部加入以下代码:(针对Confluence 5.4.3,其他版本可参照本文思路稍加改造,要会使用firebug的元素查看器以及jquery)
(这里用到了rangy库,关于rangy资料可自行查找资料了解,这里不做介绍)
rangy下载链接http://download.csdn.net/download/keydot2007/7070635(textcommands.js做了扩展)
<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做了扩展)
相关文章推荐
- 编辑器字体、颜色与字号的设置
- CSDN编辑器markdown字体、颜色与字号的设置
- markdown编辑器语法——文字颜色、大小、字体与背景色的设置(转)
- 一步步学习SPD2010--第十章节--SP网站品牌化(1)--设置CSS和颜色编码页面编辑器选项
- Ueditor编辑器修改字体和字号?
- IntelliJ IDEA使用之二—编辑器字体设置
- CSDN-markdown编辑器语法——字体、字号与颜色
- 【EditPlus】开发编辑器设置舒服的字体
- Ecshop后台增加|添加商店设置选项和使用方法详解
- Markdown 编辑器设置字体大小颜色
- 修改Latex常用编辑器WinEdt中的字号与字体 [转]
- CSDN-markdown编辑器语法——字体、字号与颜色
- markdown编辑器语法——字体、字号与颜色
- CSDN-markdown编辑器语法——字体、字号与颜色
- MFC中设置static text控件的背景色、字体、字号和颜色
- AS设置字体字号
- FOXMAIL小问题―设置新邮件的默认字体和字号
- markdown编辑器语法——文字颜色、大小、字体与背景色的设置(转)
- 一步步学习SPD2010--第十章节--SP网站品牌化(1)--设置CSS和颜色编码页面编辑器选项
- IntelliJ IDEA 设置 编辑器字体大小