툴바 사용자 정의하기

목차

  1. 툴바 사용자 정의하기
    1. Editor.config.defaultToolbarButtonList
    2. Editor.config.defaultToolbarButtons
    3. 버튼 정의 형식
  2. 예제
    1. 버튼 추가하기
    2. 버튼 추가하기
    3. 아이콘 변경하기
    4. 한글 폰트를 폰트 리스트에 추가하기
  3. 참고 문서

 

 

 

툴바의 버튼들을 추가/제거할 수 있습니다.

 

기존 ButtonGroup/ButtonMap 기반의 툴바 재정의 방법은 특정 ButtonGroup 단위의 버튼 추가/삭제에는 편리하지만, 버튼별 추가/삭제를 위해서 너무 많은 코드가 필요했습니다.

그래서 List 기반의 툴바 재정의 방식을 추가했습니다. 사용할 버튼들을 나열하고, "seperator" 키워드를 통해 그룹핑(버튼들의 간격을 줌)하는 방법입니다.

 

툴바 사용자 정의하기#

툴바를 사용자 정의 하는데는 두 가지 방법이 있습니다.

 

  1. 기존 Toolbar를 수정/덮어씌우기
  2. 새롭게 ToolbarContainer를 정의

 

사용자가 별도의 툴바 객체를 지정하지 않는다면, Xquared는 Editor.defaultToolbarButtonMap를 참고하여 디폴트 툴바를 설정합니다.

기존 Toolbar를 수정하는데는, ButtonMap 방식과 ButtonList 방식을 사용합니다. ButtonMap 방식에 대해서는 ButtonMap을 이용한 그룹핑 방식 (deprecated) 페이지를 참고해 주세요.

 

이 페이지에서는 defaultToolbarButtonList 방식에 대해서 설명합니다.

 

Editor.config.defaultToolbarButtonList#

 

Editor.js에 Editor.config.defaultToolbarButtons 객체 목록이 정의되어 있습니다. 이 객체들은 Xquared의 기본 버튼들을 정의합니다. 이를 사용해서, xed.config.defaultToolbarButtonList 를 재정의할 수 있습니다.

xed.config.defaultToolbarButtonList 에 정의한 버튼들만 에디터 툴바에 위치하게 됩니다.

각 버튼들 사이에 간격을 주고 싶으면, "seperator" 를 넣어줍니다.

 

예를 들어, 아래와 같이 정의하면 다음과 같은 툴바를 얻을 수 있습니다.

toolbar_buttonlist_sample1.png

 

  1. xed.config.defaultToolbarButtonList = [
        xed.config.defaultToolbarButtons.foregroundColor,
        xed.config.defaultToolbarButtons.backgroundColor,
        "separator",
        xed.config.defaultToolbarButtons.fontFace,
        xed.config.defaultToolbarButtons.fontSize,
         "separator",
        xed.config.defaultToolbarButtons.justifyCenter,
         "separator",
        xed.config.defaultToolbarButtons.code,
        xed.config.defaultToolbarButtons.orderedList,
    ];

 

Editor.config.defaultToolbarButtons#

Editor.js 에 defaultToolbarButtons 객체가 정의되어 있습니다.  객체들의 목록은 아래에 나열되어 있습니다.

 

 

버튼 정의 형식#

xed.config.defaultToolbarButtons.fontFace와 같은 각각의 버튼 객체들은 다음과 같이 구성되어 있습니다. 새로운 버튼을 만들거나, 기존 버튼 객체를 수정하려면 아래와 같이 만들어주면 됩니다.

 

  1. {className:"html", title:"Edit source", handler:"xed.toggleSourceAndWysiwygMode()"}

 

 

즉, 위와 같은 버튼을 정의하면 툴바 영역에는 아래와 같은 HTML 이 추가됩니다.

 

  1. <span class=""><a title="Edit source" href="#"><img src="../images/toolbar/html.gif" class="html"></a></span>

 

예제#

버튼 추가하기#

아이콘 변경하기#

툴바 이미지는 images/toolbar 폴더의 {className}.gif 를 가져옵니다. 따라서, 툴바 폴더에 className 이름과 동일한 gif 이미지를 넣으면 버튼의 이미지를 변경할 수 있습니다.

 

한글 폰트를 폰트 리스트에 추가하기#

 

참고 문서#

 

Back