다이얼로그

2.9.0 버전부터 지원합니다.

에디터로 사용자 정의 다이얼로그를 만든 뒤 플러그인 객체의 dialogs 속성에 할당해 등록할 수 있습니다.

플러그인 다이얼로그 등록

SynapEditor.addPlugin('customDialogPlugin', function (editor) {
  var dialogName = 'myCustomDialog';
  var customDialog = editor.createCustomDialog(dialogName);  // create dialog
  customDialog.attachEvent();                                  // attach default events
  return {
    dialogs: [customDialog],
    buttonDef: {
      label: 'Open custom dialog',
      iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><text x="2" y="13">D</text></svg>',
      onClickFunc: function () {
        editor.execCommand('showDialog', dialogName);
      }
    }
  };
});

결과:

editor.createCustomDialog(name, options)

사용자 정의 다이얼로그를 반환합니다.

options

title:

editor.createCustomDialog('myCustomDialog', { title: 'Dialog title' });

bodyHTML:

editor.createCustomDialog('myCustomDialog', {
  bodyHTML: '<p>Favorite fruit: <input id="favorite-fruits" style="border: 1px solid black; width: 100px;" /></p>'
          + '<p>Favorite color: <input id="favorite-colors" style="border: 1px solid black; width: 100px;" /></p>'
});

bodyClassNames:

editor.createCustomDialog('myCustomDialog', {
  bodyClassNames: ['custom-class-1', 'custom-class-2', 'custom-class-3']
});

푸터 버튼

각 버튼은 다음을 지원합니다:

• type — 버튼 타입. 클래스 이름의 일부가 됩니다. 예: confirm → se-confirm, cancel → se-cancel.
• point — true = 기본(어두운 색), false = 보조(밝은 색).
• label — 버튼 텍스트.

editor.createCustomDialog('myCustomDialog', {
  footerButtons: [
    { type: 'confirm', point: true,  label: 'Confirm' },
    { type: 'cancel',  point: false, label: 'Cancel' }
  ]
});

customDialog.attachEvent()

기본 동작을 연결합니다:

• 제목 표시줄의 X 클릭 시 닫기
• ESC로 닫기
• 취소 버튼 클릭 시 닫기 (푸터 버튼 중 type: 'cancel'인 경우)

var customDialog = editor.createCustomDialog('myCustomDialog');
customDialog.attachEvent();

예시

// ./plugins/favoriteThingsPlugin.js
var pluginName = 'favoriteThingsPlugin';
var pluginGenerator = function (editor) {
  var dialogName = 'favoriteThings';
  var customDialog = editor.createCustomDialog(dialogName, {
    title: 'Favorite Things',
    bodyHTML:
      '<p>Favorite fruit: <input id="favorite-fruits" style="border: 1px solid black; width: 100px;" /></p>' +
      '<p>Favorite color: <input id="favorite-colors" style="border: 1px solid black; width: 100px;" /></p>',
    footerButtons: [
      { type: 'confirm', point: true,  label: 'Confirm' },
      { type: 'cancel',  point: false, label: 'Cancel' }
    ]
  });
  customDialog.attachEvent();

  // Reset inputs when the dialog opens
  customDialog.setShowAction(function () {
    document.getElementById('favorite-fruits').value = '';
    document.getElementById('favorite-colors').value = '';
  });

  // Insert HTML when confirmed
  customDialog.setConfirmAction(function () {
    var fruits = document.getElementById('favorite-fruits').value;
    var colors = document.getElementById('favorite-colors').value;
    editor.insertHTML('<p>Fruit: ' + fruits + '</p><p>Color: ' + colors + '</p>');
  });

  // Click confirm button → fire confirm action
  customDialog.getElement().on('click', '.se-confirm', function () {
    customDialog.confirm();
  });

  return {
    dialogs: [customDialog],
    buttonDef: {
      label: 'Enter favorite things',
      iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><text x="2" y="13">F</text></svg>',
      onClickFunc: function () {
        editor.execCommand('showDialog', dialogName);
      }
    }
  };
};

SynapEditor.addPlugin(pluginName, pluginGenerator);

불러오기 및 등록:

<script type="text/javascript" src="./plugins/favoriteThingsPlugin.js"></script>

'editor.toolbar': [ 'favoriteThingsPlugin' ]

결과: