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']
];

 

得到如下的效果：