Role-Based Toolbar Access

by Froala_marketing

HTML

<link
  href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css"
  rel="stylesheet"
  type="text/css"
/>

<div class="row">

  <div id="editor">
    Change <code>currentUserRole</code> variable and see toolbar button access changed based on different role.
  Modify the currentUserRole variable to observe corresponding changes in toolbar button access based on the assigned role.
  </div>

</div>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"
></script>

JavaScript

const rolePermissions = {
  editor: {
    canEdit: true,
    allowedWhenReadOnly: []
  },
  reviewer: {
    canEdit: false,
    allowedWhenReadOnly: ['print', 'fullscreen', 'html', 'approveDocument']
  },
  legal: {
    canEdit: false,
    allowedWhenReadOnly: ['print', 'getPDF', 'export_to_word', 'requestChanges']
  },
  finance: {
    canEdit: false,
    allowedWhenReadOnly: ['print', 'getPDF']
  },
  viewer: {
    canEdit: false,
    allowedWhenReadOnly: []
  }
};


// Register custom button icons and handlers
FroalaEditor.DefineIcon('approveDocument', { NAME: '&check;', template: 'text' });
FroalaEditor.RegisterCommand('approveDocument', {
  title: 'Approve Document',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function() {
    approveDocument();
  }
});

FroalaEditor.DefineIcon('requestChanges', { NAME: 'edit', SVG_KEY: 'edit' });
FroalaEditor.RegisterCommand('requestChanges', {
  title: 'Request Changes',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function() {
    requestChanges();
  }
});

function createEditor(role) {
  // Fallback to viewer if role is unknown
  const permissions = rolePermissions[role] || rolePermissions.viewer;
  
  new FroalaEditor('#editor', {
    toolbarButtonsEnabledOnEditorOff: permissions.allowedWhenReadOnly,
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor',  'clearFormatting',
     '|', 'print', 'getPDF', 'export_to_word', 'fullscreen', 'html', 'approveDocument',  'requestChanges'],
    events: {
      initialized: function() {
        if (!permissions.canEdit) {
          this.edit.off();
        }
      }
    }
  });
}

// Get the current user's role from your auth system
const currentUserRole = "legal";
createEditor(currentUserRole);