How to create webpart page using ECMA Script

Question

I have tried to create webpart page using ECMA script, but did not get the right solution.

Example : I have created two text-boxes one for "page name" ,second for "web-part name". when user click on Create button i need to create web part page then i need to add content editor on this page.

Answer 1

Since in SharePoint 2013 CSOM API was introduced SP.Publishing.Navigation namespace, the following example demonstrates how to create a publishing page.

How to create a publishing page via SharePoint 2013 JSOM

function createPublishingPage(pageName,pageLayout)
{
    var ctx = SP.ClientContext.get_current();
    var pubWeb = SP.Publishing.PublishingWeb.getPublishingWeb(ctx, ctx.get_web()); 
    var pageInfo = new SP.Publishing.PublishingPageInformation(); 
    pageInfo.set_name(pageName);
    pageInfo.set_pageLayoutListItem(pageLayout);
    var page = pubWeb.addPublishingPage(pageInfo); 
    ctx.load(page);
    var deferred = $.Deferred();
    ctx.executeQueryAsync(function() {
        deferred.resolve(page);
    },
    function(sender,args){
        deferred.reject(sender, args);
    });
    return deferred.promise(); 
}



function getPageLayoutByName(name)
{
    var ctx = SP.ClientContext.get_current();
    var list = ctx.get_site().getCatalog(SP.ListTemplateType.masterPageCatalog);
    var qry = new SP.CamlQuery();
    qry.set_viewXml(String.format("<View><Query><Where><Eq><FieldRef Name='FileLeafRef' /><Value Type='Text'>{0}</Value></Eq></Where></Query></View>", name));
    var result = list.getItems(qry);
    ctx.load(result);
    var deferred = $.Deferred();
    ctx.executeQueryAsync(function() {
        var item = result.get_count() > 0 ? result.get_item(0) : null; 
        deferred.resolve(item);
    },
    function(sender,args){
        deferred.reject(sender, args);
    });
    return deferred.promise();
}

Usage

How to create a publishing page on button click:

$('#createPageBtn').click(function(){
    var pageName = 'Welcome.aspx';
    var pageLayoutName = 'BlankWebPartPage.aspx';
    createPage(pageName,pageLayoutName);
});


function createPage(pageName,pageLayoutName)
{
    SP.SOD.registerSod('SP.ClientContext', SP.Utilities.Utility.getLayoutsPageUrl('sp.js'));
    SP.SOD.registerSod('SP.Publishing.PublishingWeb', SP.Utilities.Utility.getLayoutsPageUrl('sp.publishing.js'));
    SP.SOD.loadMultiple(['SP.ClientContext', 'SP.Publishing.PublishingWeb'], function(){
        getPageLayoutByName(pageLayoutName).then(function(pageLayout){
            createPublishingPage(pageName, pageLayout); 
        }).then(logSuccess,logError);    
    });
}


function logError(sender,args){
   console.log('An error occured: ' + args.get_message());
}

function logSuccess(sender,args){
   console.log('1. Publising page has been created Web Part has been added successfully.');
   console.log('2. Web Part has been added successfully.');
}

Once the page is created you could utilize addWebPart function from this answer to add Content Editor web part on the page