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.”);
}
}
5 Responses to "Ribbon.EditingTools.CPInsert.Media – Add a custom insert video button to Editing Ribbon"
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
February 20, 2012 at 11:47 am
I have the button on the ribbon and the JS fires however nothing is inserted into the editor window… any ideas?
February 20, 2012 at 12:52 pm
Nevermind… I forgot to add a reference to jQuery…