User roles for multiple Xeditor configurations

In the following chapter we explain how you send a role ID to the editor. The roles themselves are defined in Xeditor. Of course, you can also define all role properties in your CMS and send them to the editor. But since this may mean a lot of implementation effort on the CMS side, we describe here the example that the properties themselves are in Xeditor. The disadvantage of this solution is that if a new role is created in the CMS, a new role would also have to be created in the Xeditor code.

First create a new file user_roles.js to define the user roles. Here, the differences to the normal configuration are simply defined and later applied on the basis of the role id.

In the following example we simply pass the role in the URL (either as "role" in PlainText or as "r" and Base64 encoded) in getRoleFromUrl. In getRole the roleId is requested from an remote server (it's only dummy data here, since we do not have any endpoint for this.)

/**
* Role for authors
*/
var authorRole = {
      attributes: {
            editorMode: 'edit'
      },
};

/**
* Role for reviewer
*/
var reviewerRole = {
      attributes: {
            editorMode: 'annotate'
      },
      finalizePlugins: function(plugins) {
            var pluginsToDisable = [
                  'uxxeditorlistfeatures',
                  'uxxeditorlistinsertelements',
                  'uxxeditorpluginmanager',
                  'uxxeditorchangeelementlevel'

            ];
            return plugins.filter(function(plugin) {
                  return pluginsToDisable.indexOf(plugin.ptype) === -1;
            });
      }
};

/**
* Role for anonymous user
*/
var anonymRole = {
      attributes: {
            editorMode: 'read'
      },
      finalizePlugins: reviewerRole.finalizePlugins
};

/**
* Role for xml specialists
*/
var xmlSpecialistRole = {
      attributes: {
            editorMode: 'edit'
      },
      finalizePlugins: function(plugins) {
            plugins.push({
                  pluginId: 'raweditor',
                  ptype: 'uxxeditorraweditor',
                  aceBaseURL: './ace',
                  validationURL: BLACKBOX_URL + '/editor/validate',
                  transformURL: BLACKBOX_URL + '/editor/transform'
            });
            return plugins;
      }
}

// map id to role configuration
var roles = {
      'anonym': anonymRole,
      'author': authorRole,
      'reviewer': reviewerRole,
      'xml_specialist': xmlSpecialistRole,
}

module.exports = {
      roles: roles,

      getRoleFromUrl: function() {
            // get URL params
            var params = Ext.Object.fromQueryString(location.search.substring(1));

            // get roleid from params
            var roleId = 'anonym';
            if (params.r) {
                  try {
                        roleId = atob(params.r);
                  } catch(e) {}
            } else if (params.role) {
                  roleId = params.role;
            }

            return Ext.Promise.resolve(roles[roleId] || roles['anonym']);
      },
      getRole: function() {
            return new Ext.Promise(function(resolve, reject) {
                  Ext.Ajax.request({
                        url: "http://localhost:7070/role?userId=123",
                        scope: this,
                        disableCaching: true,
                        success: function(response, options) {
                              // var roleResponse = JSON.parse(response.responseText);
                              var roleResponse = { role: 'author' }
                              var role = roles[roleResponse.role] || roles['anonym'];
                              resolve(role);
                        },
                        failure: function(response, options) {
                              reject(new Ext.ux.xeditor.error.Error(910, "Error during an Ajax request", response));
                        }
                  });
            })
      }
}

Then we simply apply the roles in index.js:

var urlConfig = require("./config/urls");
var attributesConfig = require("./config/attributes");
var pluginsConfig = require("./config/plugins");
var customConfig = require('./config/index');
var schemaConfig = require('@xeditor/schema-demo');

// Include predefined roles
var roles = require('./config/user_roles');

Ext.onReady(function() {
      Ext.QuickTips.init();
});

Ext.on("xeditorloaded", function() {
      Ext.onReady(function() {
            Ext.get('xpub-loading').remove();

            var menus = [];

            var externalToolbar = Ext.create('Ext.toolbar.Toolbar', {
                  region: 'north',
                  height: 40,
                  border: false,
                  cls: 'xe-first-toolbar',
                  items: []
            });

            var params = Ext.Object.fromQueryString(location.search.substring(1));

            // get role
            roles.getRole().then(function(role) {
                  var provider = Ext.ux.xeditor.provider.AjaxProvider.forMiddleware(BLACKBOX_URL);

                  // may apply 'finalizePlugins'
                  var roleBasedPluginConfig = (typeof role.finalizePlugins === "function" ? role.finalizePlugins(pluginsConfig) : pluginsConfig) || pluginsConfig;

                  var editorConfig = {
                        provider: provider,
                        region: 'center',
                        configObj: new Ext.ux.xeditor.Config(Ext.apply(schemaConfig.configData, customConfig)),
                        plugins: roleBasedPluginConfig,
                        documentId: params.href || params.doc || 'default',
                        listeners: {
                              beforeeditorinit: function(editor, eOpts) {
                              }
                        },
                        externalToolbar: externalToolbar
                  };

                  Ext.apply(editorConfig, urlConfig);

                  // Apply role 'attributes'.
                  Ext.apply(editorConfig, Ext.merge(attributesConfig, role.attributes));

                  var editor = Ext.create('Ext.ux.xeditor.Editor', editorConfig);

                  Ext.create('Ext.container.Viewport', {
                        layout: 'border',
                        items: [externalToolbar, editor]
                  });
                  editor.boot();
            });

      });
});

Thus you have created a simple role mapping and can already control editor attributes and plugins here.

Of course you can also use this system to create your own toolbars per role or customize the existing ones or any other adjustments you can make in the editor.