How to migrate Quark Publishing Platform 15.x/16.x existing plugins to QPP NextGen

Product: Quark Publishing Platform (QPP) NextGen

This document lists the class objects that have been changed from QPP to QPP NextGen. The guide also provides a few examples on how to use these class objects in QPP NextGen to perform a same function.

Changed Class Objects

The class objects that have changed from QPP to QPP NextGen are as follows:

Function	QPP Class	QPP NextGen Class
Editor	QXmlEditor/ QaEditorEx	QA.author
Core	QXmlEditorCore	QA.author.qaCore
Editor Instance	QXmlEditor.getEditorInstance()	QA.author.qaCore.editorInstance
Callback Manager	QXmlEditorCallbackManager	QA.author.qaCallbackManager
Event Manager	QXmlEditorEventManager	QA.author.qaEventManager
Section Manager	QXmlEditorEx.getSectionManager()	QA.author.qaCore.qaSectionManager

Migrate Event Manager

QPP	QPP NextGen
QXmlEditorEventManager.addListener(QXmlEditorEventManager.Events.CHANGE_ACCEPTED, (data) => { console.log(data) })	QA.author.qaEventManager.addListener(QA.author.qaEventManager.EVENTS.CHANGE_ACCEPTED, (data) => { console.log(data) })

Migrate Callback Manager

QPP	QPP NextGen
QXmlEditorCallbackManager.registerCallback(QXmlEditorCallbackManager.Callbacks. BEFORE_DOCUMENT_LOAD, (data) => { console.log(data); return data; }, this);	QA.author.qaCallbackManager.registerCallback(QA.author.qaCallbackManager.Callbacks. BEFORE_DOCUMENT_LOAD, (data) => { console.log(data); return data; }, this);

Migrate CKEditor Plugin

The following plugin validates the length of a document title when a user clicks the toolbar button Validate Title.

QPP

QPP NextGen

CKEDITOR.plugins.add('validate',{
  init: function (editor){
  editor.ui.addButton('validate',{
     label: 'Validate Title',
     command: 'validatetitle',
     icon: this.path + 'validate.png'});
     // Associates a command with the
        click of the button
  editor.addCommand('validatetitle', {
     modes: { wysiwyg: 1 },
     readOnly: 1,
     // Allows command execution even
        When a user opens a document in
        read-only mode
     readOnlyExec: true,
     // Allows command execution even
        when cursor is in read-only mode
     exec: function (editor) {
     // Gets the root section
      var rootTopicNode = QXmlEditorEx.getRootSectionElement();
      var titleNode = QXmlEditorEx.getTitleNode(rootTopicNode);
      //Gets the text content from the
        title node
      var titleText = QXmlEditorEx.getText("", titleNode);
      var length = titleText.length;
      if (length > 20) {
        Ext.MessageBox.show({
       title: 'Document Title Check',
       msg: 'Document title cannot be
       more than 20 characters',
       buttons: Ext.MessageBox.OK,
       fn: function () {
        titleNode.addClass("headline-
        error");
        }
       });
      }else if
      (titleNode.hasClass("headline-
       error")) {
       titleNode.removeClass("headline-
       error");
    }
     }
  });
   }
});

CKEDITOR.plugins.add('validate',{
  init: function (editor) {
  const resourcePath =
  editor.qaEditor.qaExtensibilityService.
  getResourcePath("validate");
  editor.ui.addButton('validate', {
     label: 'Validate Title',
     command: 'validatetitle',
     icon: resourcePath + '/icon.jpg'
  });// Associates a command with the
          click of the button
    editor.addCommand('validatetitle', {
      modes: { wysiwyg: 1 },
      readOnly: 1, // For read-only mode
      readOnlyExec: true,
      // Allows command execution even when
         cursor is in read-only mode
      exec: function (editor) {
      // Gets the root section
       var rootTopicNode = editor.qaEditor.getRootSectionElement()
       var titleNode = editor.qaEditor.qaCore.getTitleNode(rootTopicNode);//Gets the text content from the title node
       var titleText = editor.qaEditor.qaCore.getText("", titleNode);
       var length = titleText.length;
       if (length > 20) {
        // Show Error Dialog.
        const msgBox = editor.qaEditor.showDialog("qa-msg-box",
        title: 'Document Title Check',
        msgType: "error",
        msgText: 'Document title cannot be more than 20 characters'
        });
        msgBox.on("close", () => {
        titleNode.addClass("headline-error");
        msgBox.close();
        });
       } else if (titleNode.hasClass("headline-error")) {
        titleNode.removeClass("headline-error");
      }
     }
   });
}});

Migrate Asset Picker

QPP

QPP NextGen

var assetPickerBrowserId = QXmlEditorEx.getAssetPickerBrowserId('PICTURE_BROWSER');
QXmlEditorEx.showAssetPickerDialog(title, assetPickerBrowserId, replaceImageHandler);
function replaceImageHandler(assetId, assetName) { }

CKEDITOR.plugins.add('customPlugin’, {
init: function (editor) {
const qaEngine = editor.engine;
let assetPickerInstace;
qaEngine.qaEditor.getAssetPicker().subscribe((_assetPicker ) => {
assetPickerInstace = _assetPicker;
});
}
// Method bound to some command/event/action to open asset picker
openAssetPicker() {
assetPickerInstace.show({ assetFilter: "PICTURE_BROWSER" });
const subscription = assetPickerInstace.selectedAsset.subscribe((asset) => {
// Do stuff
assetPickerInstace.close();
});
assetPicker.hide.subscribe(() => {
subscription.unsubscribe();
});
}

Choose files or drag and drop files

sf_kb_import

Tags:

Was this article helpful?

Yes

Priyanka Bhotika
Posted
Updated

Comments

Please sign in to comment