소개

이전에 Nuxt.js에서 개발하고 CKEditor를 시행 착오로 도입했습니다.

그 쪽의 경험을, Nuxt.js에 CKEditor를 도입하여 편집기에서 이미지 이동, 크기 조정을 드래그하여 실현 로서 정리했습니다.

그 후, 약간의 경험치를 쌓아, 바뀌었다고 할까, 아, 부끄럽다고 하는 부분을 수정합니다.

CKEDITR4 도입 방법 변경

CKEditor에 플러그인을 추가하는 것이 번거롭다고 생각했지만, 아래와 같이 깔끔하게 실현이 가능했습니다 (땀)

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

<style scoped></style>

editorUrl 에 로컬에 설치한 CKEditor를 사용하고 있었습니다만, CDN 경유로부터의 다운로드로 변경했습니다.

이 배경은 플러그인을 구성 파일에서 자유롭게 변경할 수 있다는 것을 알았기 때문입니다.editorConfig 의 extraPlugins 에서 추가 플러그인을 지정할 수 있고 removePlugins 에서 제외할 플러그인을 지정할 수 있었습니다.

자체 플러그인 도입

이전 기사에는 작성하지 않았지만 자체 플러그인을 도입하는 것을 시야에 넣었기 때문에 CKEditor 자체를 다운로드하는 것에도 저항이 없었습니다.

이번 CDN을 통해 독자적인 플러그인을 호출하는 방법을 알았으므로 알려 드리겠습니다.

CKEDITOR에서 addExternal 메서드를 호출하면 자체 플러그인이 로드됩니다.
ckeditor4-vue 그렇다면 어떻게 하는 것일까? 라고 생각하면, 다음과 같이 하는 것 같습니다.

<template>
  <ckEditor
    v-model="contents"
    :editor-url="editorUrl"
    :config="editorConfig"
    @namespaceloaded="onNamespaceLoaded"
  ></ckEditor>
</template>

<script>
import CKEditor from 'ckeditor4-vue'
export default {
  name: 'CKEditor4',
  components: { ckEditor: CKEditor.component },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      required: false,
      default: 500
    }
  },
  data() {
    return {
      editorUrl: 'https://cdn.ckeditor.com/4.15.1/full-all/ckeditor.js',
      editorConfig: {
        height: this.height,
        extraPlugins: ['image2', 'timestamp'],
        removePlugins: ['image']
      }
    }
  },
  computed: {
    contents: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    onNamespaceLoaded(CKEDITOR) {
      // Add external `placeholder` plugin which will be available for each
      // editor instance on the page.

      let pluginBaseDir = '/ckeditor/plugins/timestamp/'
      if (process.env.NUXT_ENV_DEPLOY_SUBDIR) {
        pluginBaseDir =
          process.env.NUXT_ENV_DEPLOY_SUBDIR + '/ckeditor/plugins/timestamp/'
      }
      CKEDITOR.plugins.addExternal('timestamp', pluginBaseDir, 'plugin.js')
    }
  }
}
</script>

<style scoped></style>

ckeditr 컴퍼넌트에 대해 namespaceloaded 라는 이벤트를 수신하도록 합니다.
이것은, ckeditor4-vue 가 CKEDitor 인스턴스를 로드했을 경우에 불린다고 합니다.

그것을 Vue의 Methods로 정의한, onNamespaceLoaded 메소드로 처리를 해, 외부의 플러그인을 읽어들입니다.
onNamespaceLoaded 메소드는 ckeditor4-vue에서 1.2로 구현되었으므로 작동하지 않으면 버전을 확인하십시오.

플러그인은, 플러그인 자습서 로 기재된, 현재 시각의 삽입 플러그인이 됩니다.



데모 사이트