Content Management System

This article is outdated and it may contain information that is no longer up-to-date. It will be re-written soon!
By default, AdminJS is equipped with a powerful quill editor, which makes it a perfect tool as a Content Management System
AdminJS as a Content Management System
To add quill to the AdminJS setup you need to change the type of the property holding content to the richtext.
Assuming this is your DB schema (mongoose example)
const PageSchema = new mongoose.Schema({
  title: String,
  content: String,
})
const Page = mongoose.model('Page', PageSchema)
you can setup content to be a Quill instance like that:
const pageResourceOptions = {
  properties: {
    content: {
      type: 'richtext',
      custom: {
        // some custom options
      },
    },
  },
}
​
new AdminJS({
  resources: [{ resource: Page, options: pageResourceOptions }]
})
About the options
As you saw in the previous example the property takes also a custom object. In the case of richtext these are the quill options used to initialize the editor:
const editor = new Quill('#editor', custom)
So to change the toolbar you can pass modules.toolbar option:
    content: {
      type: 'richtext',
      custom: {
        modules: {
          toolbar: [['bold', 'italic'], ['link', 'image']],
        },
      },
    },
There is a very important restriction though. You can pass to custom only things which can be stringified (because they are passed to the frontend). So this won't work:
custom: {
  modules: { toolbar: {
    handlers: {link: () => {...}}
  }}
}
because the link function cannot be stringified.
To bypass this restriction you will have to write your Edit Component. You can use This Example as a starting point.

Tutorials - Previous

Internationalization (i18n)

Last modified 14d ago

Copy link

Outline