PeopleSoft Rich Text Boxes上定制Tool Bars

在使用PT8.50或在8.51时,你可能遇到过Rich-text编辑框。该插件使你能够格式化文本,添加颜色、链接、图片等等。下面是效果图:

如果页面中只有这么一个字段,该文本框就会有足够的空间来容纳其中的tools bars了,但是通常页面中会有许多字段,

因而留给该表示该文本框的字段的所需的空间就少了,于是需要根据业务需求对文本框中的工具条目进行瘦身或者适当的扩展。

简单的实现方式如下:

在Long Edit Box的Page Field 属性上有“Options”选项,勾选“Enable Rich Text”,在第一个下拉框选择可用的配置(她们都是HTML对象)。

第二个下拉框“Image Location URL Id” 用于指定Long Edit Box中上传的图片保存的路径。

打开系统已有的HTML对象“PT_RET_CFG_PTPPB”,查看其内容:

<!%
FCKEditor configuration file for Pagelet Wizard HTML Data Source
-->

CKEDITOR.config.skin=‘office2003‘;

CKEDITOR.config.toolbar =
[
  [‘Source‘,‘-‘,‘Maximize‘,‘Preview‘,‘Print‘,‘-‘,‘Cut‘,‘Copy‘,‘Paste‘,‘-‘,‘Undo‘,‘Redo‘,‘-‘,‘Find‘,‘Replace‘,‘-‘,‘HorizontalRule‘,‘Table‘,‘imageUPLOAD‘,‘Link‘,‘Unlink‘,‘SpecialChar‘],
  [‘Format‘,‘Font‘,‘FontSize‘,‘-‘,‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘],
  [‘JustifyLeft‘,‘JustifyCenter‘,‘JustifyRight‘,‘JustifyBlock‘,‘-‘,‘NumberedList‘,‘BulletedList‘,‘Outdent‘,‘Indent‘,‘-‘,‘TextColor‘,‘BGColor‘]
];

 

可以看到每个工具栏按钮通过CKEDITOR.config.toolbar数组中的一个条目表示,现在我只需要“链接”按钮,于是我新建一个HTML对象PT_RTE_CFG_CSN_JUST_LINK,

需要注意的是,新建的HTML对象的名字必须以PT_RTE_CFG_打头,否则在Long Edit Box属性对话中看不到自定义的HTML Object。

<!%
FCKEditor configuration file for Pagelet Wizard HTML Data Source
-->

CKEDITOR.config.skin=‘office2003‘;

CKEDITOR.config.toolbar =
[
  [‘Link‘,‘Unlink‘]
];

 

然后在Long Edit Box属性对话中选择PT_RTE_CFG_CSN_JUST_LINK:

瘦身效果如下:

但是上面的文本框底部显示了HTML标签,看起很不爽,于是想在之前的配置文件中修改,但是该配置文件中貌似没有可以控制这个东东的代码,到底在哪里修改呢?

原来当我使用了自定义的配置后,它会覆盖系统默认的配置即config.js中的配置。

 <ps_home>\webserv\<domain>\applications\peoplesoft\PORTAL.war\<site>\ckeditor中找到config.js文件

(在我的系统中其位置为:D:\PT8.51\webserv\peoplesoft\applications\peoplesoft\PORTAL.war\ps\ckeditor\config.js)


CKEDITOR.editorConfig = function( config )

{

      // Define changes to default configuration here. For example:

      // config.autoLanguage = false;

      // config.defaultLanguage = ‘pt-br‘;

      config.skin=‘office2003‘;

      config.resize_enabled = false;

      config.removePlugins = ‘elementspath‘;

      config.toolbar =

[

      [‘Maximize‘,‘Preview‘,‘Print‘,‘-‘,‘Cut‘,‘Copy‘,‘Paste‘,‘-‘,‘Undo‘,‘Redo‘,‘-‘,‘Find‘,‘Replace‘,‘-‘,‘HorizontalRule‘,‘Table‘,‘imageUPLOAD‘,‘Link‘,‘Unlink‘,‘SpecialChar‘],

      [‘Format‘,‘Font‘,‘FontSize‘,‘-‘,‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘],

      [‘JustifyLeft‘,‘JustifyCenter‘,‘JustifyRight‘,‘JustifyBlock‘,‘-‘,‘NumberedList‘,‘BulletedList‘,‘Outdent‘,‘Indent‘,‘-‘,‘TextColor‘,‘BGColor‘]

];

可以看到该文件中包含如下两行:

config.resize_enabled = false;

config.removePlugins = ‘elementspath‘;

于是将这两行添加到自定义的HTML Object中:

<!%
FCKEditor configuration file for Pagelet Wizard HTML Data Source
-->

CKEDITOR.config.skin=‘office2003‘;
CKEDITOR.config.resize_enabled = false;
CKEDITOR.config.removePlugins = ‘elementspath‘;
CKEDITOR.config.toolbar =
[
  [‘Link‘,‘Unlink‘]
];

 

得到如下的效果:

时间: 2024-10-09 14:25:48

PeopleSoft Rich Text Boxes上定制Tool Bars的相关文章

【转】(八)unity4.6Ugui中文教程文档-------概要-UGUI Rich Text

原创至上,移步请戳:(八)unity4.6Ugui中文教程文档-------概要-UGUI Rich Text 7.Rich Text UI元素和文本网格的文本可以合并多个字体样式和大小.对 UI系统和传统的 GUI系统都支持富文本.Text. GUIStyle. GUIText和 TextMesh的类有丰富文本设置指导unity寻找tags标记的文本.Debug.Log函数也可以使用这些标记来提高代码的错误报告.tags不会显示,但显示样式的更改会应用于文本. 7.1 Markup forma

Rich Text

如上图,new text类型,勾上Rich Text 即可进行同行不同颜色字体设置.在Text文本中对需要改变颜色的字体用<color="#ff0000"></color>标签括起来,标签中间不要有空格,我刚才犯了这个小错误,导致颜色不能正常显示.

Unity2017.1官方UGUI文档翻译——Rich Text

Rich Text 富文本 The text for UI elements and text meshes can incorporate multiple font styles and sizes. Rich text is supported both for the UI System and the legacy GUI system. The Text, GUIStyle, GUIText and TextMesh classes have a Rich Text setting

DevExpress ASP.NET Core v19.1版本亮点:Rich Text Editor

行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强的控件功能,欢迎下载v19.1试用,点击立即下载>> Pivot Grid 新的富文本编辑器 全新的ASP.NET Core Rich Text Editor附带了您在ASP.NET Core应用程序中快速合并高级文本编辑功能所需的一切. 其功能包括: 文件导入/导出(docx,rtf,txt)

selenium处理rich text(富文本框)

WordPress 的 rich  text 采用js,先让selenium切换到iframe中 driver.switchTo().frame("content_ifr"); 然后执行JS WebElement editor = driver.findElement(By.tagName("body"));   JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;   jsExecutor.exe

NicEdit - WYSIWYG Content Editor, Inline Rich Text Application

NicEdit - WYSIWYG Content Editor, Inline Rich Text Application By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size

10款优秀的Rich Text Editor

Introduction Javascript rich text editor has ease our life when we need to edit articles, post or even documents online. Most of the editors allow user to edit the content straight away (What You See Is What You Get - WYSIWYG), it just like editting

Selenium Webdriver——JS处理rich text(富文本框)

126邮件正文邮件的rich text 先让selenium切换到iframe中 driver.switchTo().frame(driver.findElement(By.className("APP-editor-iframe"))); 然后执行JS WebElement editor = driver.findElement(By.tagName("body")); JavascriptExecutor jsExecutor = (JavascriptExec

Unity3d读取CSV中的文本到Rich Text中换行符不识别的问题

项目中要用到符文本做一些信息显示,需要有颜色.字体样式.换行之类,Unity的 Rich Text就可以用来做这类需求. 关于Rich Text 的使用: http://docs.unity3d.com/Manual/StyledText.html 虽然里面没有提到 " \n " 这个换行符,但是其实是支持的. 文章转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn 今天在读取CSV中的内容到 Rich Text中显示的时