Tutorial

11. Content Management System

By default, AdminBro is equipped with a powerful quill editor, which makes it a perfect tool as a Content Management System

AdminBro as a Content Management System

To add quill to the AdminBro 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',
      props: {
        borderless: true, // 
        quill: {
          // some custom props
        },
      },
    },
  },
}

new AdminBro({
  resources: [{ resource: Page, options: pageResourceOptions }]
})

About the options

As you saw in the previous example the property takes also a props object. In the case of richtext it has quill options used to initialize the editor:

const editor = new Quill('#editor', props.quill)

So to change the toolbar you can pass modules.toolbar option:

    content: {
      type: 'richtext',
      props: {
        quill: {
          modules: {
            toolbar: [['bold', 'italic'], ['link', 'image']],
          },
        },
      },
    },

There is a very important restriction though. You can pass to props only things which can be stringified (because they are passed to the frontend). So this won't work:

props: {
  quill: {
    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.

SoftwareBrothers

Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by

SoftwareBrothers