adminJS 튜토리얼 - 콘텐츠 관리 시스템 (공식 사이트 번역)

주의!!!!) 이 문서는 오래되었으며 더 이상 최신 정보가 아닌 정보를 포함할 수 있습니다. 곧 다시 쓸 예정입니다!

 

기본적으로 AdminJS에는 강력한 Quill(퀼) 편집기가 장착되어 있어 콘텐츠 관리 시스템으로서 완벽한 도구가 됩니다.

 

콘텐츠 관리 시스템으로서의 AdminJS

AdminJS 설정에 quill을 추가하려면 콘텐츠를 포함하는 속성의 유형을 리치 텍스트로 변경해야 합니다.

이것이 DB 스키마라고 가정합니다(몽구스 예).

const PageSchema = new mongoose.Schema({
  title: String,
  content: String,
})
const Page = mongoose.model('Page', PageSchema)

 

다음과 같이 콘텐츠를 Quill 인스턴스로 설정할 수 있습니다.

const pageResourceOptions = {
  properties: {
    content: {
      type: 'richtext',
      custom: {
        // some custom options
      },
    },
  },
}

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

 

 

옵션 정보

이전 예제에서 본 것처럼 속성은 custom개체도 사용합니다. 이러한 경우 richtext편집기를 초기화하는 데 사용되는 퀼 옵션은 다음과 같습니다.

const editor = new Quill('#editor', custom)

따라서 도구 모음을 변경하려면 module.toolbar 옵션을 전달할 수 있습니다.

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

그러나 매우 중요한 제한이 있습니다. 문자열화 할 수 있는 항목만 사용자 정의에 전달할 수 있습니다(프론트 엔드로 전달되기 때문). 따라서 이것은 작동하지 않습니다.

custom: {
  modules: { toolbar: {
    handlers: {link: () => {...}}
  }}
}

링크 함수를 문자열화 할 수 없기 때문입니다. 이 제한을 우회하려면 Edit Component를 작성해야 합니다. 이 예를 시작점으로 사용할 수 있습니다.