Loading...
Loading...
SunEditor는 미디어, 서식 및 고급 기능을 다루는 24개의 내장 플러그인을 제공합니다.
각 플러그인은 툴바에 표시되는 방식을 결정하는 표시 유형에 속합니다.
display 속성은 플러그인이 사용자와 상호 작용하는 방식을 정의합니다.
image구성 가능이미지 업로드, 크기 조정 및 정렬
video구성 가능동영상 콘텐츠를 삽입하고 관리하세요.
audio구성 가능플레이어로 오디오 파일을 삽입하세요
link하이퍼링크를 생성하고 편집합니다.
embed구성 가능외부 콘텐츠 삽입(YouTube, iframe)
drawing구성 가능캔버스 기반 드로잉 도구
math구성 가능수학 방정식 편집기(KaTeX)
configurable로 표시된 플러그인은 플레이그라운드에서 조정할 수 있는 옵션을 제공합니다.
이미지 업로드 제한, 글꼴 크기 단위, 테이블 스크롤 유형, 멘션 트리거 등을 조정하세요. 변경 사항은 실시간 편집 화면에 즉시 적용됩니다.
간단한 명령 버튼부터 완전한 대화 상자 기반 기능까지, 사용자 지정 플러그인을 구축하기 위한 기술 참고 자료입니다.
옵션의 `plugins` 파일에 플러그인 클래스를 등록하세요. 코어가 해당 클래스를 인스턴스화합니다.
모든 에디터 서비스는 this.$를 통해 접근해야 하며, 핵심 모듈을 직접 가져오는 일은 절대 없어야 합니다.
다양한 계약(ModuleModal, EditorComponent 등)을 구현하여 라이프사이클에 연결하세요.
import { PluginCommand } from 'suneditor/src/interfaces';
class HelloWorld extends PluginCommand {
static key = 'helloWorld';
/**
* @constructor
* @param {SunEditor.Kernel} kernel - The Kernel instance
*/
constructor(kernel) {
super(kernel);
this.title = 'Hello World';
this.icon = '<span style="font-size:14px">HW</span>';
}
/**
* @override
* @type {PluginCommand['action']}
*/
action() {
this.$.html.insert('<p>Hello, World!</p>');
this.$.history.push(false);
}
}
export default HelloWorld;플러그인이 사용자와 상호 작용하는 방식에 따라 기본 클래스를 선택하세요.
PluginCommandcommand필수: action()Button click executes action immediately
내장 예제: blockquote, hr, strike
PluginDropdowndropdown필수: action()Button opens menu, item click calls action()
내장 예제: align, font, blockStyle
PluginDropdownFreedropdown-freeButton opens menu, plugin handles own events
내장 예제: table, fontColor, codeBlock
PluginModalmodal필수: open(), modalAction()Button opens modal dialog
내장 예제: link, image, video
PluginBrowserbrowser필수: open(), close()Button opens gallery/browser interface
내장 예제: imageGallery
PluginFieldfieldResponds to editor input events
내장 예제: autocomplete
PluginInputinputToolbar input element (not a button)
내장 예제: pageNavigator
PluginPopuppopup필수: show(), controllerAction()Inline popup context menu
내장 예제: anchor
플러그인은 다양한 상호 작용 모드를 제공하기 위해 다른 플러그인 유형 인터페이스를 구현할 수도 있습니다.
fontSizeextends PluginInput+ PluginCommand+ PluginDropdownInput field + dropdown list + command (inc/dec) all controlling font size.
list_bulleted / list_numberedextends PluginCommand+ PluginDropdownCommand button for toggling list + dropdown for selecting list style.