How to edit SharePoint WYSIWYG editor?
Customization of SharePoint’s WYSIWYG Editor
In publishing and collaboration site s we see WYSWING editor in Content Query Web Part and several other places.
If you would like to add a new field then read the following article provided in the msdn: -
How to: Add a Button to the HTML Editor Field Control
https://msdn.microsoft.com/en-us/library/ms520217.aspx
But if you would like to modify its existing functionality (icon, menu, combo and its functionality) in SharePoint then you have modify HTMLEditor.js and form.js but that is not recommended. Modifying OOB files may hamper your environment and you will be out of support boundaries.
The following are the steps to create a custom “from.js” file.
1. Create a copy of OOB “from.js” file and named it as “customfrom.js”
2. Create a custom master page.
3. Add the script reference of your “customfrom.js” in your custom master page.
4. Add and activate the custom master page on your site.
You can follow the same to modify HTMLEditor.js file.
This is how WYSIWYG editor looks in SharePoint site:-
![clip_image002[4]](https://msdntnarchive.blob.core.windows.net/media/TNBlogsFS/BlogFileStorage/blogs_msdn/navdeepm/WindowsLiveWriter/HowtoeditSharePointWYSIWYGeditor_7B94/clip_image002%5B4%5D.jpg "clip_image002[4]")
MODIFY AN ITEM IN PARAGRAPH STYLE COMBO
If you go to “apply paragraph styles” combo and click on it, you will see the following items:-
![clip_image004[4]](https://msdntnarchive.blob.core.windows.net/media/TNBlogsFS/BlogFileStorage/blogs_msdn/navdeepm/WindowsLiveWriter/HowtoeditSharePointWYSIWYGeditor_7B94/clip_image004%5B4%5D.jpg "clip_image004[4]")
In this case, we will modify default “Normal” list item to “Navdeep” and change its style to:-
FontName |
Verdana |
FontSize |
45pt |
ForeColor |
Blue |
![clip_image006[4]](https://msdntnarchive.blob.core.windows.net/media/TNBlogsFS/BlogFileStorage/blogs_msdn/navdeepm/WindowsLiveWriter/HowtoeditSharePointWYSIWYGeditor_7B94/clip_image006%5B4%5D.jpg "clip_image006[4]")
Before jumping to the code directly, I would liketo expain about the ActiveX control which generates this block formats. The name of ActiveX control is Dialog Helper.
HtmlDlgSafeHelper (Dialog Helper) Object
Provides access to the color dialog box, block formats, and system fonts collections. The following object must be there in your get the value in you javascript :-
To create this object, use the OBJECT element and provide the class identifier (CLSID) for the dialog helper.
<OBJECT id=”dlgHelper” CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
Collections
Collection |
Description |
Retrieves a collection of strings that specify the names of the available block format tags. |
|
Retrieves a collection of all the system-supported fonts. |
Methods
Method |
Description |
Opens the system color-selection dialog box. |
|
Gets a Variant that specifies the character set of a given font. |
In “HTMLEditor.js”, we have a function named RTE2_GenerateEditorToolsHtml which throws the following HTML to create dialog helper object
document.body.insertAdjacentHTML("afterBegin", "<object id=\"RTEDialogHelper\" name=\"RTEDialogHelper\" classid=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" style=\"width:0px; height:0px;\" TABINDEX=-1></OBJECT>");
We need to modify the RTE_GetBlockFormatNames in our “customfrom.js” file with the following highlighted code:-
function RTE_GetBlockFormatNames()
{
var rgstrItemNamesRet=new Array();
var dh=RTE_GetDialogHelper();
if ((null !=dh) && (null !=dh.blockFormats) && (0 < dh.blockFormats.count))
{
var iItem;
for (iItem=1; iItem < dh.blockFormats.count; iItem++) {
var newItem = dh.blockFormats(iItem);
if (newItem.toString() == "Normal") {
newItem = "Navdeep";
}
RTE_InsertIntoSortedArrayIfValid(newItem, rgstrItemNamesRet);
}
}
return rgstrItemNamesRet;
}
Now the name has been changed so in the next action, we have to modify another function name of “ExecuteCommandOnSelection” of “customfrom.js” file. I have highlighted the code need to be added in this function.
function RTE_ExecuteCommandOnSelection(strBaseElementID, strCommand, fUserInterface, strValue)
{
var docEditor=RTE_GetEditorDocument(strBaseElementID);
RTE_RestoreSelection(strBaseElementID);
if ((strCommand==g_strRTECreateLinkMnemonic) || (strCommand==g_strRTEInsertImageMnemonic))
{
g_fRTEDialogIsOpen=true;
}
if (strValue == "Heading 1") {
docEditor.execCommand("FontName", fUserInterface, "arial");
docEditor.execCommand("FontSize", fUserInterface, "30pt");
docEditor.execCommand("ForeColor", fUserInterface, "Red");
}
else if (strValue == "Navdeep") {
docEditor.execCommand("FontName", fUserInterface, "Verdana");
docEditor.execCommand("FontSize", fUserInterface, "45pt");
docEditor.execCommand("ForeColor", fUserInterface, "Blue");
}
else {
docEditor.execCommand(strCommand, fUserInterface, strValue);
}
if (g_fRTEDialogIsOpen)
{
g_fRTEDialogIsOpen=false;
RTE_OnFocus(strBaseElementID);
}
RTE_StartResetToolBarTimer(strBaseElementID);
var fUseDynamicHeightSizing=RTE_UseDynamicHeightSizing(strBaseElementID);
if (fUseDynamicHeightSizing)
{
RTE_DocEditor_AdjustHeight(strBaseElementID);
}
}
Note :- By this the following line of code exist :-
docEditor.execCommand(strCommand, fUserInterface, strValue);
While debugging I checked the value of variable passed in above function when I selected the value “Heading 1” in paragraph styles combo.
Here are the values :- strCommand = FormatBlock
fUserInterface = false
strValue = “Heading 1”
execCommand is a Method of DHTML which is required to WYSIWYG editor. Here is some description of the editor :-
execCommand Method
Executes a command on the current document, current selection, or the given range.
bSuccess = object .execCommand( sCommand [, bUserInterface ] [, vValue ])
sCommand |
Required. String that specifies the command to execute. This command can be any of the command identifiers that can be executed in script. |
bUserInterface |
Optional. Boolean that specifies one of the following values. false Default. Do not display a user interface. Must be combined with vValue, if the command requires a value.
Display a user interface if the command supports one. |
vValue |
Optional. Variant that specifies the string, number, or other value to assign. Possible values depend on the command. |
Do not invoke the execCommand method until after the page loads.
Command Identifiers
Allows absolutely positioned elements to be moved by dragging.
Sets an element's position property to "absolute."
Sets or retrieves the background color of the current selection.
Not currently supported.
Not currently supported.
Toggles the current selection between bold and nonbold.
Not currently supported.
Clears all authentication credentials from the cache. Applies only to execCommand.
Copies the current selection to the clipboard.
Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current selection or insertion point.
Inserts a hyperlink on the current selection, or displays a dialog box enabling the user to specify a URL to insert as a hyperlink on the current selection.
Copies the current selection to the clipboard and then deletes it.
Deletes the current selection.
Not currently supported.
Not currently supported.
Not currently supported.
Sets or retrieves the font for the current selection.
Sets or retrieves the font size for the current selection.
Sets or retrieves the foreground (text) color of the current selection.
Sets the current block format tag.
Increases the indent of the selected text by one indentation increment.
Not currently supported.
Not currently supported.
Overwrites a button control on the text selection.
Overwrites a box on the text selection.
Overwrites a horizontal line on the text selection.
Overwrites an inline frame on the text selection.
Overwrites an image on the text selection.
Overwrites a button control on the text selection.
Overwrites a check box control on the text selection.
Overwrites a file upload control on the text selection.
Inserts a hidden control on the text selection.
Overwrites an image control on the text selection.
Overwrites a password control on the text selection.
Overwrites a radio control on the text selection.
Overwrites a reset control on the text selection.
Overwrites a submit control on the text selection.
Overwrites a text control on the text selection.
Overwrites an empty marquee on the text selection.
Toggles the text selection between an ordered list and a normal format block.
Overwrites a line break on the text selection.
Overwrites a drop-down selection control on the text selection.
Overwrites a list box selection control on the text selection.
Overwrites a multiline text input control on the text selection.
Converts the text selection into an ordered list.
Toggles the current selection between italic and nonitalic.
Centers the format block in which the current selection is located.
Not currently supported.
Left-justifies the format block in which the current selection is located.
Not currently supported.
Right-justifies the format block in which the current selection is located.
Causes the MSHTML Editor to update an element's appearance continuously during a resizing or moving operation, rather than updating only at the completion of the move or resize.
Allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys.
Not currently supported.
Decreases by one increment the indentation of the format block in which the current selection is located.
Toggles the text-entry mode between insert and overwrite.
Overwrites the contents of the clipboard on the current selection.
Not currently supported.
Opens the print dialog box so the user can print the current page.
Not currently supported.
Refreshes the current document.
Removes the formatting tags from the current selection.
Not currently supported.
Saves the current Web page to a file.
Selects the entire document.
Not currently supported.
Not currently supported.
Not currently supported.
Not currently supported.
Not currently supported.
Not currently supported.
Not currently supported.
Not currently supported.
Removes any bookmark from the current selection.
Toggles the current selection between underlined and not underlined.
Undo the previous command.
Removes any hyperlink from the current selection.
Clears the current selection.
Here is the result :-
![clip_image008[4]](https://msdntnarchive.blob.core.windows.net/media/TNBlogsFS/BlogFileStorage/blogs_msdn/navdeepm/WindowsLiveWriter/HowtoeditSharePointWYSIWYGeditor_7B94/clip_image008%5B4%5D.jpg "clip_image008[4]")
ADD ITEMS IN PARAGRAPH STYLE COMBO
We need to modify the RTE_GetBlockFormatNames in our “customfrom.js” file with the following highlighted code:-
function RTE_GetBlockFormatNames()
{
var rgstrItemNamesRet=new Array();
var dh=RTE_GetDialogHelper();
if ((null !=dh) && (null !=dh.blockFormats) && (0 < dh.blockFormats.count))
{
var iItem;
for (iItem=1; iItem < dh.blockFormats.count; iItem++) {
var newItem = dh.blockFormats(iItem);
if (newItem.toString() == "Normal") {
newItem = "Navdeep";
}
RTE_InsertIntoSortedArrayIfValid(newItem, rgstrItemNamesRet);
}
rgstrItemNamesRet[rgstrItemNamesRet.length] = "My New Item";
rgstrItemNamesRet[rgstrItemNamesRet.length] = "My 2 New Item";
}
return rgstrItemNamesRet;
}
You will see the two new items named “My New Item” and “My 2 New Item” in the paragraph style combo.
![clip_image010[4]](https://msdntnarchive.blob.core.windows.net/media/TNBlogsFS/BlogFileStorage/blogs_msdn/navdeepm/WindowsLiveWriter/HowtoeditSharePointWYSIWYGeditor_7B94/clip_image010%5B4%5D.jpg "clip_image010[4]")
Here are the links of article which helped me to understand this control:-
How to: Add a Button to the HTML Editor Field Control
https://msdn.microsoft.com/en-us/library/ms520217.aspx
execCommand Method
https://msdn.microsoft.com/en-us/library/ms536419(VS.85).aspx
HtmlDlgSafeHelper (Dialog Helper) Object
https://msdn.microsoft.com/en-us/library/ms535238(VS.85).aspx
Command Identifiers
https://msdn.microsoft.com/en-us/library/ms533049(VS.85).aspx