CKEditor 5 추가 지원

[highk]

XE 에디터에 CKEditor 5 를 추가합니다.

[highk]

기존 에디터툴을 사용할 수 없는 문제가 있습니다.

1. 에디터툴 스펙에 에디터의 종류를 구분하지 않게 설계된 문제
2. ckeditor4 와 5의 개발 스펙이 다른 문제
3. ckeditor5에서 동적으로 플러그인을 추가하는 부분을 지원하는지 검토해야합니다.

[highk]

현재, 다음의 스크린샷에서 사용되는 임의의 css 파일을 로드하는 기능을 이용할 수 없습니다. (대응되는 코드 미작성 상태)

[highk]

Xpressengine core 수정 필요

https://github.com/xpressengine/xpressengine/blob/master/resources/assets/core/editor/editorDefine.js#L41

이 함수를 아래의 코드를 덮어씌우고

  async create (sel, options, editorOptions, toolInfoList) {
    toolInfoList = toolInfoList || []
    editorOptions = $.extend(this.configs || {}, editorOptions || {})

    if (EditorValidation.isValidBeforeCreateInstance(sel, toolInfoList, this)) {
      const editorIntance = new EditorInstance(this.name, sel, editorOptions, toolInfoList)
      editorIntance._editor = this
      this.editorList[sel] = editorIntance
      var result = this.initialize.call(this.editorList[sel], sel, options, editorOptions)

      if (result instanceof Promise) {
        await result
      }

      if (!!toolInfoList && toolInfoList.length > 0) {
        let tools = {}
        let toolInfoListFilter = []

        for (let i = 0, max = toolInfoList.length; i < max; i += 1) {
          if (window.XEeditor.getTool(toolInfoList[i].id)) {
            tools[toolInfoList[i].id] = window.XEeditor.getTool(toolInfoList[i].id)
            toolInfoListFilter.push(toolInfoList[i])
          } else {
            console.error('define된 tool이 존재하지 않음. [' + toolInfoList[i].id + ']')
          }
        }

        if (this.addTools && typeof this.addTools === 'function') {
          this.addTools.call(this.editorList[sel], tools, toolInfoListFilter)
        }
      }

      this.$$emit('editor.created', this.editorList[sel])
      return this.editorList[sel]
    }
  }
}

js를 build 해야합니다.

cd resources/assets
npm i
npm run align

[highk]

comment에서 사용하기 위해서는 service.js 코드를 수정해야 합니다.

https://github.com/xpressengine/plugin-comment/blob/develop/assets/js/service.js#L705-L726

아래 코드로 대체해주세요.

initEditor: function () {
      if (typeof (XEeditor) === 'undefined') {
        return
      }

      var that = this
      var id = 'comment_textarea_' + (new Date().getTime())
      $('textarea', this.dom).attr('id', id).css('width', '100%')

      window.XE.app('Editor').then(function renderEditor (appEditor) {
        appEditor.getEditor(that.editorData.name).then(function createEditor (editor) {
          that.editor = editor.create(id, that.editorData.options, that.editorData.customOptions, that.editorData.tools)

          if(that.editor instanceof Promise) {
            that.editor.then(function (editor) {
              that.editor = editor;
              that.editor.on('focus', function focusCallback () {
                $(id).triggerHandler('focus')
              })
              that.editor.on('change', function changeCallback () {
                $(id).triggerHandler('input')
              })
            })
          } else {
            that.editor.on('focus', function focusCallback () {
              $(id).triggerHandler('focus')
            })
            that.editor.on('change', function changeCallback () {
              $(id).triggerHandler('input')
            })
          }
        })
      })
    },

[highk]

4604661 이 커밋 에
"펼치기" 버튼이 추가됨에 따라 /settings/lang에서 가져오기를 통해 ckeditor 다국어를 갱신해야합니다.

[highk]

현재 File attach warp 에서 이미지 파일을 삭제해도 에디터 본문에는 남아있는 이슈가 있습니다.

[highk]

현재, 소스코드 보기 상태에서 펼치기 기능이 동작하지 않는 문제가 있습니다.