Microsoft Land

Ribbon.EditingTools.CPInsert.Media – Add a custom insert video button to Editing Ribbon

Posted on: July 7, 2011


This is a simple feature to add a Video button in the Insert Tab when you are in a Content Editor Webpart.

Create an empty sharepoint solution using Visual Studio and Add an Empty element into the solution.

<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/“>
<CustomAction        Id=”CommandUI.Ribbon.EditingTools.Hitachi_InsertVideoButton”        Location=”CommandUI.Ribbon”>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location=”Ribbon.EditingTools.CPInsert.Media.Controls._children”>
<Button
Id=”Ribbon.EditingTools.CPInsert.Media.Controls.Hitachi_InsertVideoButton”
ToolTipTitle=”Blog Video”
ToolTipDescription=”Insert a video into the blog post.”
Sequence=”50″
LabelText=”Blog Video”
Image16by16=”/publishingimages/insvideo.png.png”
Image32by32=”/publishingimages/insvideo.png”
Command=”Hitachi_InsertVideoButtonCommand”
TemplateAlias=”o1″ />
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command=”Hitachi_InsertVideoButtonCommand”
CommandAction=”javascript:InsertBlogText();”/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

Make sure you have the Version number given for the Feature, refer to my other post  

Now add a Javascript Function InsertBlogText() in one of the JS files and insert a link to that in the V4.Master page. I used this below snippet to automate the Blog Video Insert to automate the insertion of the text for Admins.

function InsertBlogText()
{
var rng = RTE.Cursor.get_range().$3_0;
var d = rng.ownerDocument;
var a = d.createElement(“span”);
var imgURL = prompt(“Please insert blog video IMAGE URL”, “Blog Video Image”);
var vidURL = prompt(“Please insert blog VIDEO URL”, “Blog Video”);
if (imgURL!=”” && vidURL!=”” && imgURL!=null && vidURL!=null)
{
$(a).html(“[[BLOGVIDEO:” + vidURL + “;BLOGIMAGE:” + imgURL + “]]”);
SP.UI.UIUtility.insertAfter(a, rng);
}
else
{
alert(“Invalid inputs supplied.  Operation cancelled.”);
}
}

About these ads

6 Responses to "Ribbon.EditingTools.CPInsert.Media – Add a custom insert video button to Editing Ribbon"

I have the button on the ribbon and the JS fires however nothing is inserted into the editor window… any ideas?

Nevermind… I forgot to add a reference to jQuery…

Did you get this to work? I did the same but it just doesn’t appear at all…. I even tried putting RegistrationId=301 to point to Blog post, it also didn’t work…

hi i want to get selected HTML (text not only text) from sp 2010 rich text editor like RTE.Cursor.get_range().get_Text().

Please let me know how i can get HTML text

tnx in adv

get_range() will return you the range (user selection), which possibly couldn’t not be a valid HTML. What’s the purpose here to get the HTML instead of Text??

DId you find a solution? can you share it? I need to be able to wrap a selected HTML with a custom DIV tag through a ribbon button

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

My Tweets

Follow

Get every new post delivered to your Inbox.

Join 121 other followers

%d bloggers like this: