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
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 }]
})
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.