플러그인 사용/제작하기

플러그인^#

Xquared는 플러그인 기능을 지원합니다. 플러그인을 통해 누구나 Xquared의 기능을 수정/확장하고 배포할 수 있습니다.

코드를 직접 수정하지 않고 플러그인 형태로 제작하면, Xquared 코드와의 결합성이 낮아집니다. 따라서, Xquared를 업데이트해도 문제가 생길 일이 적어집니다.

현재 만들어진 플러그인 목록^#

기본으로 제공하는 플러그인은 javascripts/plugin 에서 확인할 수 있습니다.

2009년 2월 16일 현재,

• Resize 플러그인
• FileUpload 플러그인
• FlashMovie 삽입 플러그인
• Springnote 단축키 플러그인

등이 제공되고 있습니다.

플러그인 사용 방법^#

플러그인을 사용하는 방법은 간단합니다. 플러그인 파일을 include한 후, Editor.addPlugin()로 추가하면 됩니다.

1. 플러그인 파일을 삽입합니다.

1. <script type="text/javascript" src="../javascripts/plugin/EditorResizePlugin.js"></script>

2. Editor 객체에 플러그인을 추가합니다.

1. xed = new xq.Editor("xqEditor");
   xed.addPlugin('EditorResize');
   xed.setEditMode('wysiwyg');

Editor.addPlugin() 메소드를 사용해서 플러그인을 xed에 추가합니다.

Xquared의 설정/초기화와 관련된 모든 메소드는 setEditMode() 이전에 선언되어야 합니다.

에디터를 보면, Textarea 맨 하단에 Resizing을 할 수 있는 영역이 생성된 것을 확인할 수 있습니다.

파일 업로드 플러그인 사용방법^#

파일 업로드 플러그인 페이지에서 자세한 사용방법을 알아볼 수 있습니다.

플러그인 만들기^#

플러그인을 만들기 위해서는 이미 만들어진 다른 플러그인들을 예제로 활용하는 것이 가장 좋습니다.

기본 제공되는 플러그인들은 각각 다음의 예제 역할도 겸합니다.

• 툴바에 버튼을 추가하고, 버튼을 클릭했을 때 지정된 자바스크립트 액션(함수)를 수행하는 플러그인

  • FileUpload 플러그인

• XQuared의 Mouse/Key 이벤트에 지정된 함수를 추가하기

  • Resize 플러그인

• Xquared의 단축키, 자동완성, 자동변환에 지정된 것들을 추가

  • Springnote 단축키 플러그인

규칙^#

Xquared에서는 플러그인 설정을 쉽게 하기 위해, 플러그인 코드(.js) 파일이 위치하는 경로, 파일이름과 플러그인의 명명규칙을 제한하고 있습니다.

플러그인의 이름을 EditorResize 이라고 할 때,

• 플러그인의 이름 : EditorResizePlugin
• 코드파일의 이름 : EditorResizePlugin.js
• 플러그인 소스파일(.js)의 경로 : javascripts/plugin

을 지켜야 합니다.

함수^#

javascripts/plugin/Base.js은 플러그인 클래스의 Base Class 입니다. 이 베이스 클래스에서 플러그인에서 사용되는 함수들을 확인할 수 있습니다.

javascripts/plugin/Base.js를 보고, 필요한 함수들을 오버라이딩해서 사용하면 됩니다.

플러그인에서 사용되는 주요 함수들은 다음과 같습니다.

• this.onAfterLoad(this.editor);
• this.onAfterUnload(this.editor);

onAfterLoad 메소드는 플러그인이 로딩된 후 호출되는 메소드이며, onAfterUnload 메소드는 플러그인이 언로드된 후 호출되는 메소드입니다.

onAfterLoad 메소드에서 Editor(xed)에 객체나 함수를 추가하는 방법으로 Xquared를 확장할 수 있습니다.

외부 모듈 연동하기^#

Xquared를 도입하는 측에서 가장 많이 문의하는 것은

• 툴바에서 기본 버튼을 제거하기
• 툴바에 새로운 버튼을 추가하기
• 툴바에 추가한 버튼을 눌렀을 때 외부 모듈이 실행되고, 그 모듈의 결과가 에디터 내부에 삽입되기

입니다.

이 중 툴바에서 버튼을 추가/제거하는 것은 툴바 사용자 정의하기 페이지를 참고하면 됩니다.

툴바에 추가한 버튼을 눌렀을 때 외부 모듈이 실행되고, 그 모듈의 결과가 에디터 내부에 삽입되기를 구현해 보겠습니다.

툴바 사용자 정의하기 페이지를 통해, 툴바에 버튼을 하나 추가했다고 합시다.

플러그인에서 이벤트를 받아서 처리하기^#

DOM 이벤트가 발생할 때 플러그인이 이 이벤트를 받아서 핸들링할 수 있습니다. 이를 위해서는 플러그인 내부에 다음과 같은 구현을 해야 합니다.

1. isEventListener 메소드를 오버라이딩하고, true 를 반환하게 합니다.
2. onEditorInitialized 함수를 만들고, 그 안에서 registerEventFirer를 사용해 이벤트를 등록하고, 원하는 이벤트를 observe 하게 합니다.

javascripts/plugin/EditorResizePlugin.js 가 좋은 예입니다.

1. xq.plugin.EditorResizePlugin = xq.Class(xq.plugin.Base,
       /**
        * @name xq.plugin.EditorResizePlugin
        * @lends xq.plugin.EditorResizePlugin.prototype
        * @extends xq.plugin.Base
        * @constructor
        */
       {
       isEventListener: function() {return true;},
      
       onAfterLoad: function(xed) {
           this.xed = xed;
           this.bar = null;
           this.screen = null;
           this.active = false;
       },
      
       onEditorInitialized: function(xed) {
           xed.registerEventFirer("Editor", "Resized");    
           // ...중략...
   
           // register event
           xq.observe(this.bar, 'mousedown', this.onMousedown.bindAsEventListener(this));
           xq.observe(document, 'mouseup', this.onMouseup.bindAsEventListener(this));
           xq.observe(this.bar, 'click', this.onMouseup.bindAsEventListener(this));
           this.mousemoveHandler = this.onMousemove.bindAsEventListener(this);
       },
      
       onMousedown: function(e) {
2. // 구현...
3. }

단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 추가^#

플러그인이 Xquared의 단축키, 자동완성, 자동변환, 컨텍스트 메뉴 등의 기능을 확장할 수 있습니다. 플러그인에 해당 콜백 함수들을 오버라이딩하면 됩니다.

SpringnotePlugin.js 에서 단축키-getShortcuts, 자동 완성-getAutocorrections, 자동변환-getAutocompletions, 템플릿-getTemplateProcessors 등을 오버라이딩하고 있습니다. 이를 예제로 참고하셔서 구현하시면 됩니다.

1. getShortcuts: function() {return [];},
2. getAutocorrections: function() {return [];},
   getAutocompletions: function() {return [];},
   getTemplateProcessors: function() {return [];},
3. getContextMenuHandlers: function() {return [];}