Custom Ribbon Button on Wiki Page's Editing Tools Ribbon in SharePoint Online

Question

Using the Core.RibbonCommands sample add-in from SharePoint add-in recipes for custom ribbons, I was able to add custom tab into pages in SharePoint Online except while viewing/editing SitePages or publishing-pages.

For instance, while trying to add a button into Wiki Page's Editing Ribbon, the custom ribbon buttons just don't appear if I use the exact same xml from another post in the msdn forum, albeit for SharePoint 2010.

Appreciate your help on how the ribbons can be customised for a Wiki Page

RibbonCommands.xml

<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WikiExtensions.Ribbon.EditingTools"
          Location="CommandUI.Ribbon"
          Sequence="20">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.Styles.Controls._children">
          <Button Id="WikiExtensions.Ribbon.InsertCodeBlock"
      Alt="Notify hello"
      Sequence="5"
      Command="WikiExtensions.Command.InsertCodeBlock"
      Image16by16="/_layouts/images/NoteBoard_16x16.png"
      Image32by32="/_layouts/images/NoteBoard_32x32.png"
      Description="Uses the notification area to display a message."
      LabelText="Notify hello"
      TemplateAlias="o1" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
    </CommandUIExtension>
  </CustomAction>
</Elements>

Answer 1

I tried to add to Edit group, it works.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script language="javascript" type="text/javascript">
        function AddCustomUserAction() {
            //Get the client context and list object
            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            //Get the custom user action collection and add the user action
            var customUserAction = web.get_userCustomActions().add();
            //Set the location of the user action
            customUserAction.set_location('CommandUI.Ribbon');
            //Add the properties for the custom action
            var userActionExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' + '<CommandUIDefinitions>' + '<CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.EditAndCheckout.Controls._children">' + '<Button Id="WikiExtensions.Ribbon.InsertCodeBlock" ' + 'Command="WikiExtensions.Command.InsertCodeBlock" ' + 'Sequence="5" ' + 'Image16by16="/_layouts/images/NoteBoard_16x16.png" ' + 'Image32by32="/_layouts/images/NoteBoard_32x32.png" ' + 'Description="Uses the notification area to display a message." ' + 'LabelText="Notify hello" ' + 'TemplateAlias="o1"/>' + '</CommandUIDefinition>' + '</CommandUIDefinitions></CommandUIExtension>';
            //Add the command UI extension and update the custom user action
            customUserAction.set_commandUIExtension(userActionExtension)
            customUserAction.update();
            //Load the client context and execute the batch
            context.load(web, 'UserCustomActions');
            context.executeQueryAsync(function () {
                console.log("Custom User Action added successfully to ribbon.");
            }, function (sender, args) {
                console.log(args.get_message());
            });
        }
    </script>
    <input id="Button1" onclick="AddCustomUserAction()" type="button" value="button" />