Add your own shortcut key functionality in Enhanced rich text box of SharePoint 2010


In SharePoint 2010 we have one more multiline textbox editor type i.e. enhanced rich text box. This RTE provides much more facility to format your content. Many of the functionalities can be performed through short keys of your keyboard. For e.g. to apply Bold style on your selected text one can use “Ctrl + B”, same way to insert hyperlink shortcut key is “Ctrl + K”. Keyboard short cut functionality saves user’s efforts and time to perform certain task. Sometime we might have a requirement to add our own short cut key combination to perform certain functionality in RTE. Here, I am going to demonstrate that how we can insert current date time in RTE at current cursor position using shortcut key combination.

There are many ways to achieve this but I am going to explain the simplest approach by modifying the SharePoint javascript file used for rich text box. For Enhanced Rich Text box Editor SharePoint uses “SP.UI.Rte.js” file (minified version) and it uses “SP.UI.Rte.debug.js” for the debugger. You can find these two files at following path.

“C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS”

“SP.UI.Rte.js” is a compressed script file so that we will use here “SP.UI.Rte.debug.js” file to understand the Rte’s short cut functionality. After that we have to apply those changes in compressed file also.

In “SP.UI.Rte.debug.js” file at line no 6200 you will find the method to detect the shortcut key. See the following screenshot.
*It is not necessary that  you find at line no 6200, it might be somewhere else as per the version #of your SharePoint 2010. Try to search for RTE.ShortcutKeys.getShortcut method.

In the above code it checks the pressed keys and returns available action / method to be performed on that key combination. This is the place where we are going to write our custom code for our required key combination.

We are going to insert current date time in the text area at current cursor position. We are going to use “Ctrl + L” combination to perform this task.

In above code you can see “$p0” object which holds the key pressed event data in RTE. Following screen shot shows the various properties of the object “$p0”.

For us following are the main useful properties.

altKey
ctrlKey
shiftKey
keyCode

True value of either altKey or ctrlKey or shiftKey indicates that one or combination of those keys are pressed in keyboard either left or right keys. keyCode indicates the ASCII code of the pressed key along with the alt or ctrl or shift keys. If you have pressed only ctrl key then it will give ASCII code of ctrl in keyCode. For e.g. if user has pressed “Ctrl + B” then ctrlKey will be true and keyCode will contain the ascii value of B i.e. “66”

Let’s start some code to detect “Ctrl + L” to insert current date time.

Before “return RTE.ShortcutKeys.$Z_0[$v_0];” (at line # 6205) we are going to check whether pressed key combination is “Ctrl + L” is or not. 76 is an ascii value of L

//— Begening of the Code
if ($p0.ctrlKey && $p0.keyCode == 76) {
//Now we are going to fetch the current object of the RTE.
var $v_3 = RTE.Cursor.get_range(); //current text object of the RTE
var $v_4 = $v_3.parentElement();

if (!$v_4) {
return;
}

var $v_5 = $v_4.ownerDocument.createElement(‘SPAN’); // Create new element to add SPAN tag in the content text area which will hold the current date time as text.

var currentDate = new Date(); //date object which will be used to get the current date time.

var y = currentDate.getYear(); // Current year

var m = currentDate.getMonth()+1; // Current month and added + 1 because in javascript it starts with index 0

var d = currentDate.getDate(); // Current Date

$v_5.innerHTML = d + ‘/’ + m + ‘/’ + y + ‘ ‘ + currentDate.getHours() + ‘:’ + currentDate.getMinutes(); // Assign current date and time as a html conent of the SPAN tag.

if ($v_3.isEmpty()) { // if selected text of the RTE is empty then insert new element before the cursor
$v_3.insertBefore($v_5);
}

else { // if there is some text is selected then replace that text with the current date time
if ($v_5.innerHTML.trim() !==) {
$v_3.replaceHtml();
}
$v_3.wrapRange($v_5);
}

$v_3.moveToEndOfNode($v_5);

RTE.Cursor.update();// Update the RTE content

}

//— End of the Code

Now, test the code in RTE. Set focus on the Enhanced RTE and press the “Ctrl + L” key. See, following screen shot.

Now add some text and select some part of it, see the following screen shot.



Now, press the “Ctrl + L” key and replace the selected text with current date time.

Your final code will look like following screen shot.

About these ads
This entry was posted in SharePoint 2010 and tagged , , , , , , , , , , , , . Bookmark the permalink.

6 Responses to Add your own shortcut key functionality in Enhanced rich text box of SharePoint 2010

  1. vijisuresh says:

    Hi Lokesh,

    Tried reaching u?

  2. Offspringer says:

    Hey Lokesh,
    Do you know by any chance how can I configure some kind of key combination to use login sharepoint 2010?
    For example:
    My “Login” button is hidden on purpose so anonymous users couldn’t log. I want to press CTRL+ALT+A+S as login to the website. Can you provide any help?
    Thanks

  3. My coder is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on several
    websites for about a year and am nervous about switching to another platform.
    I have heard fantastic things about blogengine.net. Is there a way I can import
    all my wordpress content into it? Any kind of help would be really appreciated!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s