Status title 릴리즈 2.16.0 이상
폼 요소를 수식/화학식을 삽입하고 속성을 편집할 수 있는 폼 요소 편집기 플러그인입니다.
수식 편집기 플러그인 입니다.
사용 모듈
사이냅에디터 수식 편집기 플러그인은 MathType이라는 상용 모듈을 사용하고 있습니다.
사용을 원하실 경우 아래 페이지를 통해 문의하시기 바랍니다.
- 제품문의 하기: https://www.synapsoft.co.kr/contact/
- MathType: https://www.wiris.com/en/solutions/integrations/html-editors/
사용방법
플러그인 파일 불러오기
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- MathType라이브러리를 추가해야 사용이 가능합니다. (https://www.npmjs.com/package/@wiris/mathtype-generic#documentation) --> <script src="mathtype-generic/wirisplugin-generic.js의 url"></script> <!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 --> <script src="formEditormathType.min.js의 url"></script> <link rel="stylesheet" href="formEditor.min.css의 url"> |
wirisplugin-generic.js 파일 다운 방법
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- MathType Generic Integration 전용 패키지를 설치하면 wirisplugin-generic.js 파일이 함께 제공됩니다. -->
npm install @wiris/mathtype-generic@7.31.0
<!-- 설치 후 파일 위치 -->
node_modules/@wiris/mathtype-generic/wirisplugin-generic.js
이 파일을 프로젝트 내 경로로 복사해서 사용하시면 됩니다. |
툴바에 버튼 추가하기
수식 편집, 화학식 편집 버튼을 툴바 영역, 메뉴 영역에 추가할 수 있습니다.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
//...
'editor.toolbar': [
// 수식/화학식
'mathType.math', 'mathType.chem'
//...
],
// ... |
플러그인 설정하기
폼 요소 벌룬 설정
폼 요소 벌룬에 나타날 버튼의 목록을 직접 설정할 수 있습니다.
...
...
mathType 설정하기
window.WirisPlugin.GenericIntegration 객체 초기화시 사용할 properties를 설정합니다.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
//... 'formEditormathType.config': { 'balloonproperties': { // 벌룬이름 : [ 나타날 버튼 이름 배열 ] 'formEditor_text'configurationService': ['formEditor_textProperties', 'formEditor_delete'], 'formEditor_textarea': ['formEditor_textareaProperties', 'formEditor_delete'], 'formEditor_select': ['formEditor_selectProperties', 'formEditor_delete'], 'formEditor_radio': ['formEditor_radioProperties', 'formEditor_delete'], 'formEditor_checkbox': ['formEditor_checkboxProperties', 'formEditor_delete'], 'formEditor_button': ['formEditor_buttonProperties', 'formEditor_delete'], 'formEditor_hidden': ['formEditor_hiddenProperties', 'formEditor_delete'], 'formEditor_datalist': ['formEditor_datalistProperties', 'formEditor_delete'], 'formEditor_datalistInput': ['formEditor_datalistInputProperties', 'formEditor_delete'], 'formEditor_label': ['formEditor_labelProperties', 'formEditor_delete'], 'formEditor_fieldset': ['formEditor_fieldsetProperties', 'formEditor_delete'], 'formEditor_form': ['formEditor_formProperties', 'formEditor_delete'] } },/pluginwiris_engine/app/configurationjs' } } // ... |
...
폼 요소 이벤트 설정 기능 사용
폼 요소의 속성 다이얼로그를 이용해 이벤트를 설정할 수 있습니다.
(이벤트를 설정할 수 있는 다이얼로그: 텍스트 필드 속성, 텍스트 영역 속성, 버튼 속성, 선택 박스 속성, 라디오 버튼 속성, 체크 박스 속성, 데이터 목록 입력필드 속성)
기능을 사용하려면 에디터의 컨텐츠 필터 설정 중 이벤트 속성 삽입을 허용해야 합니다.
'editor.contentFilter.allowEventAttribute' 설정을 true 로 설정해 이벤트 속성 삽입을 허용할 수 있습니다. (참고: 컨텐츠 필터)
| Warning | ||
|---|---|---|
| ||
옵션사용으로 인해 발생하는 보안문제는 책임질 수 없습니다. |
...
...
ACTION
insertFormRunElement
텍스트 필드, 텍스트 영역, 선택 박스와 같은 인라인 폼 요소를 현재 캐럿 위치에 삽입합니다.
parameters
...
삽입할 인라인 폼 요소의 종류
- text
- number
- password
- hidden
- radio
- checkbox
- textarea
- select
- button
- submit
- reset
- label
- datalist
- datalistInput
mathType API 설정하기
Status title 릴리즈 3.1.2501 이상 Status title 릴리즈 2.19.2501 이상
MathType API를 사용하여 수식을 표현할 수 있습니다. API가 설정되지 않은 경우, 내부 모듈에서 변환된 이미지로 수식이 표시됩니다. MathType 서버를 통합한 경우, 해당 API를 서버에 설정해야 합니다.
자세한 내용은 아래 문서를 참고하세요:
API 서비스 설정 가이드
| Code Block | |||||
|---|---|---|---|---|---|
| |||||
editor.execCommand('insertFormRunElement', 'text'); // <input type="text"> 삽입
editor.execCommand('insertFormRunElement', 'number'); // <input type="number"> 삽입
editor.execCommand('insertFormRunElement', 'email'); // <input type="email"> 삽입
editor.execCommand('insertFormRunElement', 'password'); // <input type="password"> 삽입
editor.execCommand('insertFormRunElement', 'hidden'); // <input type="hidden"> 삽입
editor.execCommand('insertFormRunElement', 'radio'); // <input type="radio"> 삽입
editor.execCommand('insertFormRunElement', 'checkbox'); // <input type="checkbox"> 삽입
editor.execCommand('insertFormRunElement', 'textarea'); // <textarea> 삽입
editor.execCommand('insertFormRunElement', 'select'); // <select> 삽입
editor.execCommand('insertFormRunElement', 'button'); // <button type="button"> 삽입
editor.execCommand('insertFormRunElement', 'submit'); // <button type="submit"> 삽입
editor.execCommand('insertFormRunElement', 'reset'); // <button type="reset"> 삽입
editor.execCommand('insertFormRunElement', 'label'); // <label> 삽입
editor.execCommand('insertFormRunElement', 'datalist'); // <datalist> 삽입
editor.execCommand('insertFormRunElement', 'datalistInput'); // <Input list=""> 삽입 |
insertFormBlockElement
폼, 필드셋과 같은 블럭 폼 요소를 현재 캐럿 위치에 삽입합니다.
...
| |
//...
'mathType.config': {
'mathMlToSvgUrl': '/render?format=svg&mml={mathML}'
}
// ... |