홈>2020-02-01 00:33

ace editor - Webpack을 사용하여 Jodit이 번들 버전의 Ace를 사용하도록하는 방법

웹 애플리케이션에서 이미 웹팩과 함께 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을 어떻게 구성 할 수 있습니까?

webpack ace-editor 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은 번들 라이브러리를 두 번째로 가져 오는 대신 번들 라이브러리를 사용합니다.

Python2.net

ace editor - Webpack을 사용하여 Jodit이 번들 버전의 Ace를 사용하도록하는 방법

관련 자료