수식 편집기

2.16.0 버전부터 지원합니다.

수식/화학식 삽입 및 속성 편집이 가능한 수식 편집기 플러그인입니다.

1.00

사용된 모듈

Synap Editor 수식 편집기 플러그인은 MathType이라는 상용 모듈을 사용합니다.

사용하려면 아래 페이지로 문의합니다.

사용 방법

플러그인 파일 불러오기

<!-- You need to add the MathType library to use it. (https://www.npmjs.com/package/@wiris/mathtype-generic#documentation) -->
<script src="url of mathtype-generic/wirisplugin-generic.js"></script>

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of mathType.min.js"></script>

wirisplugin-generic.js 파일 다운로드 방법

<!-- The wirisplugin-generic.js file is provided when you install the MathType Generic Integration package. -->
npm install @wiris/mathtype-generic@7.31.0

<!-- File location after installation -->
node_modules/@wiris/mathtype-generic/wirisplugin-generic.js

이 파일을 프로젝트 내의 경로에 복사하여 사용할 수 있습니다.

툴바에 버튼 추가하기

수식 편집 및 화학식 편집 버튼을 툴바 영역이나 메뉴 영역에 추가할 수 있습니다.

툴바에 추가

1.00

// synapeditor.config.js
//...
'editor.toolbar': [
    // Formula edit buttons
    'mathType.math', 'mathType.chem'
    //...
],
// ...

플러그인 구성

MathType 설정

window.WirisPlugin.GenericIntegration 객체를 초기화할 때 사용할 속성을 설정합니다.

// synapeditor.config.js
'mathType.config': {
    'properties': {
        'configurationService': '/pluginwiris_engine/app/configurationjs'
    }
}

MathType API 설정

3.1.2501 버전부터 지원, 2.19.2501 버전부터 지원합니다.

MathType API를 사용하여 수식을 표시할 수 있습니다. API가 설정되지 않은 경우, 수식은 내부 모듈에서 변환된 이미지로 표시됩니다.

자세한 내용은 아래 문서를 참고합니다:

  • API 서비스 구성 가이드
// synapeditor.config.js
'mathType.config': {
    'mathMlToSvgUrl': '/render?format=svg&mml={mathML}'
}

MathType 저장 값 설정

3.3.0 버전부터 지원, 2.21.0 버전부터 지원합니다.

MathType 에디터에서 편집된 결과를 이미지 또는 math 태그(<math>)로 표현할 수 있습니다.

저장 값 설명

값설명비고
auto (기본값)수식 편집 시 원본 데이터의 형식에 따라 결과를 저장합니다. 새로 추가 → <img><img> → <img><math> → <math>
image수식 편집 시 결과를 <img>로 저장합니다. 새로 추가 → <img><img> → <img><math> → <img>브라우저 간 표시 방식이 일관됩니다. 글꼴 스타일 편집은 MathType에서만 가능합니다.
mathML수식 편집 시 결과를 <math>로 저장합니다. 새로 추가 → <math><img> → <math><math> → <math>에디터 내에서 글꼴 스타일 편집이 가능합니다. 렌더링 방식과 지원 범위가 브라우저마다 달라 표시가 다를 수 있습니다.
//...
'mathType.config': {
    'resultType': 'auto' // 'auto'(default) | 'image' | 'mathML'
}