[Solved] Shortcuts for Paragraph Formatting

[Stephen Ranson]

Is there any way to assign a keyboard shortcut to a particular paragraph format style in the Sharepoint version of the editory (ie in the ListToolsFile.xml or the ListConfigFile.xml? 

What I want is for users to be able to apply the "Heading 1" format (ie <h1>   </h1>) to an existing line of text in the editor by pressing say ALT+1 (as is often done in MS Word etc).   I have the Paragraphs configured in the ListToolsFile and showing in the toolbar with the FormatBlock tool.  But cant see a way to assign a shortcut.  I have tried this approach, but didnt think it would work,and it didnt:
 <paragraphs>
  <paragraph name="Clear formatting" value="&lt;body&gt;" />
  <paragraph name="&lt;p&gt;Normal&lt;/p&gt;" value="&lt;p&gt;" />
  <paragraph name="&lt;h2&gt;Heading 2&lt;/H2&gt;" value="&lt;h2&gt;" shortcut="ALT+2" />
  <paragraph name="&lt;h3&gt;Heading 3&lt;/H3&gt;" value="&lt;h3&gt;" shortcut="ALT+3" />
  <paragraph name="&lt;h4&gt;Heading 4&lt;/H4&gt;" value="&lt;h4&gt;" />
  <paragraph name="&lt;h5&gt;Heading 5&lt;/H5&gt;" value="&lt;h5&gt;" />
  <paragraph name="&lt;ul&gt;&lt;li&gt;Bulleted List&lt;/li&gt;&lt;/ul&gt;" value="&lt;ul&gt;" />
  <paragraph name="&lt;ol&gt;&lt;li&gt;Numbered List&lt;/li&gt;&lt;/ol&gt;" value="&lt;ol&gt;" />
 </paragraphs>

Thanks for any help.

Tas  :-)

[Lini]

Hello,

It is not possible to implement the needed functionality in this manner, but this does not mean that it is not possible to achieve what you need with a little extra code. Here is what you can do to trick the editor to execute the FormatBlock command with specific predefined options upon hitting a shortcut:

1. Open the editor configuration file (ConfigFile.xml or ListConfigFile.xml depending on your scenario) and add the following property:

<property name="OnClientLoad">editorClientLoad</property>

2. Open the MOSSEditorTools.js file, located in the same folder as the editor configuration file, and add the following code at the end:

function editorClientLoad(editor, args)

{

editor.addShortCut("Heading2", "ALT+2");

editor.addShortCut("Heading3","ALT+3");

editor.add_commandExecuting(function(editor, args)

{

//Return if args object does no provide enough information to determine what the command is doing

if (!args || !args.get_commandName) return;

//Check the command name

var commandName = args.get_commandName();

if (commandName == "Heading2" || commandName == "Heading3")

{

//Set the value that needs to be used for the FormatBlock command

var str = "";

if (commandName == "Heading2") str = "<h2>";

else if (commandName == "Heading3") str = "<h3>";

//Fire the FormatBlock command with the exact value

editor.fire("FormatBlock", { value : str });

//Cancel the original command and fire the format block command

args.set_cancel(true);

}

});

}

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Stephen Ranson]

Thanks,

I tried this with some success, but the code gets itself into an infinite loop, so I opted for a more mechanical approach, and created a toolbar with each Heading a button (eg H1 H2 H3 etc), and then the code was very basic:

Telerik.Web.UI.Editor.CommandList["H1"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<h1>" });
};
Telerik.Web.UI.Editor.CommandList["H2"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<h2>" });
};
Telerik.Web.UI.Editor.CommandList["H3"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<h3>" });
};
Telerik.Web.UI.Editor.CommandList["H4"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<h4>" });
};
Telerik.Web.UI.Editor.CommandList["H5"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<h5>" });
};
Telerik.Web.UI.Editor.CommandList["BodyText"] = function(commandName, editor, args)
{
    editor.fire("FormatBlock", { value : "<p>" });
};

And this all works very well.

I also have another version of your editor that comes embeded with the KwizCom WikiPlus sharepoint addin, however the version of the editor is older, and the code for it somewhat different, and the same approach does not work there.  I have asked KwizCom if there is anyway that I can use the latest full version of your editor with their tool, but they haven't responded.

The code in their copy of MOSSEditorTools.js (which is stored in a script folder under RadControls > Editor and is above a folder called 7_3_5 looks like this, and I have changed my code to be as similar as I can:

RadEditorCommandList["ToggleSource"] = function(commandName, editor, oTool)
{
    //todo: call the source dialog as the MOSS editor does
    editor.SetMode(2);
}

RadEditorCommandList["H1"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<h1>" });
};
RadEditorCommandList["H2"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<h2>" });
};
RadEditorCommandList["H3"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<h3>" });
};
RadEditorCommandList["H4"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<h4>" });
};
RadEditorCommandList["H5"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<h5>" });
};
RadEditorCommandList["BodyText"] = function(commandName, editor, oTool)
{
    editor.fire("FormatBlock", { value : "<p>" });
};

But I dont get the any result, other than the status bar remains saying please wait while scripts are loaded.

Anyway, I dont expect that you guys should solve the problem since it really belongs with the KwizCom guys and myself.  But thanks for the help.

[Tervel]

Hello Stephen,

The syntax provided suggests that the module is using  RadEditor Classic.
RadEditor for ASP.NET AJAX uses the MS AJAX client-side conventions, while RadEditor Classic - which is an older product - does not, hence their client-side API's differ significantly.

Here is how you should implement the same command in RadEditor Classic:

<script type="text/javascript">
RadEditorCommandList["H2"] = function(commandName, editor, oTool)
{
  var oTool = new Object();
  oTool.GetSelectedValue = function(){ return "<H2>";}
  editor.Fire("FormatBlock", oTool);
};
</script>

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.