First published on TECHNET on Sep 07, 2012
This post is a contribution from Jaishree Thiyagarajan, an engineer with the SharePoint Developer Support team.
Note: The below walk-through is based off of a publishing site.
We can include symbols in rich text editor in MOSS 2007 in just 3 easy steps.
Step1
Copy the image (symbol.jpg) to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\Symbol (where *Symbol* is a new folder). [You can use any name for the image and the folder, but make sure to provide the correct path in Step3 below (line number 2 in the second code snippet below)].
Step2
Navigate to master page gallery. Within editing menu folder, you can find RTE2ToolbarExtension.xml, update the file as shown below [ensure that you checkin and approve this file after the modification is done].
Step3
Create a javascript file named “RTESymbolInsertion.js” to C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033 and add the below script.
Note:
a. I have added 3 symbols to the array (line number 17 in the below code snippet) . You can add many more symbols to the array. The first parameter is the “symbol” & the second is the “tooltip”.
b. You can arrange the menu items in columns. I have added the symbols in the first column (line number 23 in the below code snippet) . The first parameter for the function RTE_DD_GenerateMenuItemScriptHtml is the column number.
Once this is done, I can edit my publishing page (screen shots are from a collaboration site where publishing feature is enabled) and point to a content section I want to edit. This will bring up the rich text editor. I’ll be able to see the new menu strip and the symbols I added will be usable.
More Information
Some details about the functions used.
1. RTE2_RegisterToolbarButton : Used to register new Button to RTE
2. SymButtonOnClick : This method will be called when you click the Symbol image/button
3. SymButtonOnResetState : The method is called when the button's state is reset
4. RTE_DD_GenerateMenuOpenHtml : This method will construct the opening tag for menu.
5. RTE_DD_CloseMenu: This method will close the curent menu which is in open state
6. RTE_DD_GenerateMenuItemScriptHtml: This method expects “menu html” as the parameter. This will dynamically constructs the menuhtml with all necessary functions (such as onclick,onmouseover,onmouseout) included.
7. RTE_DD_GenerateMenuCloseHtml : This method will construct the closing tag for menu
8. RTE_GetEditorDocument : This method will return the textarea of the editor.
9. RTE2_PopupMode : This method will return “true” when the editor is in popupmode
10. RTE2_IsSourceView: This method will return “true” when the editor is in HtmlSourceView
11. RTE_RestoreSelection: This method will restore the selected text in selection state.
12. RTE_TB_SetEnabledFromCondition: Via this method we can either enable/disable a button in RTE.
Hope this post was helpful.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.