XpressEngine
  • INTRODUCE
  • 시작하기
    • 권장 사양
    • 터미널 환경 설치
    • 웹 환경 설치
    • 업데이트
    • 문제 해결(디버깅)
  • 사이트 설정
    • 회원 설정 및 관리
    • 관리자 비밀번호 설정
    • 사이트맵 추가 및 제거
    • 컨텐츠 관리 및 신고 집계
    • Store 토큰 설정
    • 익스텐션 설치 / 업데이트
    • 기본 테마 설정
    • SEO 설정
    • 다국어 설정
    • 캡챠 설정
  • 번들 플러그인
    • 미디어 라이브러리
    • 외부페이지 플러그인
    • 플러그인 업로드
  • 개발자 문서
    • 개요
    • 디렉토리 구조
    • 컴포넌트
    • 플러그인
    • 서비스
    • 라이프 사이클
    • 라우팅
    • 컨트롤러
    • 요청
    • 응답
    • 프레젠터
    • 뷰
    • 템플릿
  • 플러그인 개발
    • 개요
    • 기본경로 및 구조
    • 기본 플러그인 생성
    • 플러그인 정보 추가 및 수정
    • 관리자 사이트 메뉴 추가
    • 위젯 개발/제작
    • 모듈 개발/제작
    • 에디터 제작
    • 에디터 툴 제작
    • UI 오프젝트 제작
    • 토글 메뉴 제작
    • 다이나믹 필드 제작
    • 다이나믹 필드 스킨 제작
  • 테마 개발/제작
    • 기본경로 및 구조
    • 기본 테마 생성
    • 서브 테마 활용
    • 설정 파일 작성
    • 테마 편집 기능
  • 스킨 개발/제작
    • 기본경로 및 구조
    • 기본 스킨 생성
    • 설정 파일 작성
  • 서비스
    • 카테고리
    • 캡챠
    • 설정
    • 문서
    • 키생성(Keygen)
    • 메뉴/모듈
    • 이벤트/인터셉션
    • 파일/스토리지
    • 회원/인증
    • 모바일
    • 권한
    • 데이터베이스
    • 메일
    • 프론트엔드
    • 이미지처리
    • 세션
    • 헬퍼
    • 쿠키
    • UI오브젝트/폼빌더
    • 카운터
    • 휴지통
    • 유효성검사
    • 오류처리
    • 테마
    • 위젯박스
  • 프론트엔드 (JS)
    • 프론트 엔드 JS 시작하기
    • Lang
    • Page
    • Page Modal
    • Request
    • Validator
Powered by GitBook
On this page
  • 에디터툴
  • 에디터 도구 생성
  • 사용제한
  • Frontend

Was this helpful?

  1. 플러그인 개발

에디터 툴 제작

에디터툴

에디터툴은 에디터상에서 제공되는 기능 도구들을 말합니다. 기본적으로 제공되는 도구 이외에 사용자가 에디터에서 사용가능한 도구들을 추가할 수 있습니다.

에디터 도구 생성

컴포넌트 추가

에디터 도구는 AbstractTool 을 상속받아 구현되어야 합니다. 그리고 다음 추상 메서드를 구현해야 합니다.

  • initAssets: 도구가 동작하는데 필요로하는 파일들을 불러옵니다. (js, css)

  • getIcon: 에디터 도구영역에 추가되기 위해 필요한 아이콘 파일입니다.

  • compile: 등록된 내용중 해당 도구로 작성된 영역을 표현하기 위한 동작을 수행합니다.

class SomeTool extends AbstractTool
{
    public function initAssets()
    {
        XeFrontend::js(asset('path/to/sometool.js'))->load();
    }

    public function getIcon()
    {
        return asset('path/to/icon.gif');
    }

    public function compile($content)
    {
        $content = /* 내용 변환 코드 */;

        return $content;
    }
}

사용제한

때로는 특정 사용자만 추가된 에디터 도구를 사용하기를 원할 수 있습니다. 이럴땐 enable 메서드를 작성하여 현재 사용자가 해당 도구를 사용할 수 있는지에 대한 권한 검사를 수행해주어야 합니다.

public function enable()
{
    return /* true or false */;
}

Frontend

XEeditor.defineTool

에디터의 툴 스크립트를 정의하기 위해서는 XEeditor.defineTool (XEeditor.tools.define은 deprecated 처리되었습니다.)을 통해 아래의 형식과 같이 정의되어야 합니다. XEeditor객체에서는 Tool의 인터페이스를 제공하며 인스턴스를 관리합니다.

XEeditor.defineTool{
    id : '',
    events: {
        iconClick: function() {},
        elementDoubleClick: function() {},
    }
});

id (string)

tool의 유니크값을 사용합니다. 다른 tool들과 구분을 위해 사용됩니다.

//예시
id: 'editortool/navermap@navermap'

events

iconClick (function)

에디터 툴이 클릭됐을 경우 호출되는 이벤트입니다.

//예시
iconClick: function() {
    window.open('/tool');
}

elementDoubleClick (function)

에디터 내의 생성된 요소가 더블클릭될 경우 호출되는 이벤트입니다.

//예시
elementDoubleClick: function() {
    window.open('/tool_edit');
}

Tool사용

XEeditor.getEditor('에디터명').create시 4번째 인자로 툴정보를 넣어주게 됩니다. 해당 툴정보들은 정의된 에디터의 addTools 인터페이스를 통해 등록됩니다.

//예시
XEeditor.getEditor('에디터명').create('content', {}, {}, [{"id":"editortool\/navermap@navermap","icon":"http:\/\/domain\/plugins\/template_tool\/assets\/icon.gif","options":[],"enable":true}]
)
Previous에디터 제작NextUI 오프젝트 제작

Last updated 6 years ago

Was this helpful?

XE 의 기능을 이용하여 검사를 하고자 한다면 페이지를 확인해 주십시오.

권한