>

웹 애플리케이션에서 이미 웹팩과 함께 Ace를 사용하고 있습니다. 웹 애플리케이션에도 Jodit을 성공적으로 추가했습니다.

안타깝게도 Jodit은 사용자 정의 스크립트 로딩 메커니즘을 사용하여 자체 Ace 인스턴스를 동적으로로드하려고 시도합니다.

Jodit 개발자는 Ace URL을 ./node_modules/ace-builds/src-min/ace.js 로 변경할 것을 권장합니다  ( https://github.com/xdan/jodit/issues/48#issuecomment -387067777 ) 그러나 물론 이것은 Webpack에 번들로 제공된 Ace 사본을 사용하지 않습니다.

Jodit과 Ace의 두 인스턴스가 모두 작동하지만 두 개의 다른 Ace 인스턴스가없는 것이 좋습니다.

자체 사본을로드하는 대신 번들 버전의 Ace를 사용하도록 Jodit을 어떻게 구성 할 수 있습니까?


  • 답변 # 1

    Jodit 소스를 파고 나면 다소 쉬웠다. Jodit은 번들로 제공되는 라이브러리를 전역 객체에서 사용할 수있을 때 선택합니다.

    이 줄을 추가 한 후 Jodit은 더 이상 Ace를 동적으로로드하려고 시도하지 않으며 Ace 자체도 모드와 테마를 찾을 수 있습니다.

    require('ace-builds/src-noconflict/ace')
    require('ace-builds/src-noconflict/theme-idle_fingers') // Default theme used by Jodit
    require('ace-builds/src-noconflict/mode-html')
    // ...
    new Jodit(el) // No additional libraries will be loaded.
    
    

    맞춤 테마를 사용하려면 다음과 같이 작동합니다.

    require('ace-builds/src-noconflict/ace')
    require('ace-builds/src-noconflict/theme-sqlserver')
    require('ace-builds/src-noconflict/mode-html')
    // ...
    new Jodit(el, { sourceEditorNativeOptions: { theme: 'ace/theme/sqlserver' } })
    
    

    PS : 이것은 js-beautify에서도 작동합니다 :

    window.html_beautify = require('js-beautify').html_beautify
    
    

    이 후 Jodit은 번들 라이브러리를 두 번째로 가져 오는 대신 번들 라이브러리를 사용합니다.

  • 이전 selenium webdriver - @Before hook의 scenariogetName ()이 왜 마지막 시나리오 이름 만 반환합니까?
  • 다음 vue.js - id로 기사를 반환 — vue router, vuex