Share via


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]

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]

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]

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

blockFormats

Retrieves a collection of strings that specify the names of the available block format tags.

fonts

Retrieves a collection of all the system-supported fonts.

Methods

Method

Description

ChooseColorDlg

Opens the system color-selection dialog box.

getCharset

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.

true

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

2D-Position

Allows absolutely positioned elements to be moved by dragging.

AbsolutePosition

Sets an element's position property to "absolute."

BackColor

Sets or retrieves the background color of the current selection.

BlockDirLTR

Not currently supported.

BlockDirRTL

Not currently supported.

Bold

Toggles the current selection between bold and nonbold.

BrowseMode

Not currently supported.

ClearAuthenticationCache

Clears all authentication credentials from the cache. Applies only to execCommand.

Copy

Copies the current selection to the clipboard.

CreateBookmark

Creates a bookmark anchor or retrieves the name of a bookmark anchor for the current selection or insertion point.

CreateLink

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.

Cut

Copies the current selection to the clipboard and then deletes it.

Delete

Deletes the current selection.

DirLTR

Not currently supported.

DirRTL

Not currently supported.

EditMode

Not currently supported.

FontName

Sets or retrieves the font for the current selection.

FontSize

Sets or retrieves the font size for the current selection.

ForeColor

Sets or retrieves the foreground (text) color of the current selection.

FormatBlock

Sets the current block format tag.

Indent

Increases the indent of the selected text by one indentation increment.

InlineDirLTR

Not currently supported.

InlineDirRTL

Not currently supported.

InsertButton

Overwrites a button control on the text selection.

InsertFieldset

Overwrites a box on the text selection.

InsertHorizontalRule

Overwrites a horizontal line on the text selection.

InsertIFrame

Overwrites an inline frame on the text selection.

InsertImage

Overwrites an image on the text selection.

InsertInputButton

Overwrites a button control on the text selection.

InsertInputCheckbox

Overwrites a check box control on the text selection.

InsertInputFileUpload

Overwrites a file upload control on the text selection.

InsertInputHidden

Inserts a hidden control on the text selection.

InsertInputImage

Overwrites an image control on the text selection.

InsertInputPassword

Overwrites a password control on the text selection.

InsertInputRadio

Overwrites a radio control on the text selection.

InsertInputReset

Overwrites a reset control on the text selection.

InsertInputSubmit

Overwrites a submit control on the text selection.

InsertInputText

Overwrites a text control on the text selection.

InsertMarquee

Overwrites an empty marquee on the text selection.

InsertOrderedList

Toggles the text selection between an ordered list and a normal format block.

InsertParagraph

Overwrites a line break on the text selection.

InsertSelectDropdown

Overwrites a drop-down selection control on the text selection.

InsertSelectListbox

Overwrites a list box selection control on the text selection.

InsertTextArea

Overwrites a multiline text input control on the text selection.

InsertUnorderedList

Converts the text selection into an ordered list.

Italic

Toggles the current selection between italic and nonitalic.

JustifyCenter

Centers the format block in which the current selection is located.

JustifyFull

Not currently supported.

JustifyLeft

Left-justifies the format block in which the current selection is located.

JustifyNone

Not currently supported.

JustifyRight

Right-justifies the format block in which the current selection is located.

LiveResize

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.

MultipleSelection

Allows for the selection of more than one site selectable element at a time when the user holds down the SHIFT or CTRL keys.

Open

Not currently supported.

Outdent

Decreases by one increment the indentation of the format block in which the current selection is located.

OverWrite

Toggles the text-entry mode between insert and overwrite.

Paste

Overwrites the contents of the clipboard on the current selection.

PlayImage

Not currently supported.

Print

Opens the print dialog box so the user can print the current page.

Redo

Not currently supported.

Refresh

Refreshes the current document.

RemoveFormat

Removes the formatting tags from the current selection.

RemoveParaFormat

Not currently supported.

SaveAs

Saves the current Web page to a file.

SelectAll

Selects the entire document.

SizeToControl

Not currently supported.

SizeToControlHeight

Not currently supported.

SizeToControlWidth

Not currently supported.

Stop

Not currently supported.

StopImage

Not currently supported.

StrikeThrough

Not currently supported.

Subscript

Not currently supported.

Superscript

Not currently supported.

UnBookmark

Removes any bookmark from the current selection.

Underline

Toggles the current selection between underlined and not underlined.

Undo

Undo the previous command.

Unlink

Removes any hyperlink from the current selection.

Unselect

Clears the current selection.

Here is the result :-

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]

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

Comments

  • Anonymous
    March 05, 2010
    This was a lifesaver, thanks for the info!

  • Anonymous
    June 30, 2010
    Customfrom.js or Customform.js You repeatedly refer to form.js as from.js and customform.js as customfrom.js You may want to correct that.