본문으로 건너뛰기

최신 버전으로 마이그레이션

1.2 -> 2.0​

프로퍼티 마이그레이션​

기존 프로퍼티대체 항목비고
customStats(제거됨)새 버전 2.0에서 사용 불가
toolbarBlockstoolbar이제 세부적인 툴바 구조를 지원합니다
defaultStylesdefaultStyles (업데이트됨)구조가 이제 블록별 CSS 기반으로 변경되었습니다
modelayoutMode더 엄격한 열거형 기반 설정으로 대체되었습니다

- customStats​

customStats 프로퍼티가 제거되었습니다. 현재 버전의 RichText는 사용자 정의 통계(예: 문자 수, 단어 수, 문장 수) 표시를 더 이상 지원하지 않습니다.

텍스트 메트릭을 계산해야 하는 경우, 에디터 콘텐츠에 직접 접근하여 수동으로 처리할 수 있습니다.

const content = editor.getValue();
const wordCount = content.split(/\s+/).length;

- toolbarBlocks → toolbar​

2.0 이전에는 컨트롤 블록만 지정할 수 있었습니다.

Before 2.0
new dhx.RichText("#root", {
  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
});

2.0부터는 개별 컨트롤을 지정할 수 있습니다.

From 2.0
new richtext.Richtext("#root", {
    toolbar: [
        "undo", "style", "bold", "italic", "underline", "text-color",
        "align", "link"
    ]
});

- defaultStyles​

2.0 이전에는 툴바 선택 컨트롤의 기본값을 정의할 수 있었습니다.

Before 2.0
defaultStyles: {
    "font-family": "Tahoma",
    "font-size": "14px"
}

2.0부터는 특정 블록 유형에 대한 기본 스타일 값을 지정할 수 있습니다.

From 2.0
defaultStyles: {
  "*": {
    "font-family": "Tahoma",
    "font-size": "14px"
  },
  h1: {
    "font-size": "32px",
    "color": "#333"
  }
}
참고

*를 사용하여 모든 블록의 기본값을 정의한 후, 특정 요소(p, h1, blockquote 등)를 재정의할 수 있습니다.

- mode → layoutMode​

Before 2.0
new dhx.RichText("#root", {
    mode: "document"
});
From 2.0
new Richtext("#root", {
    layoutMode: "document" // 또는 "classic"
});

새로운 layoutMode는 "classic"과 "document" 값만 엄격히 지원합니다.

메서드 마이그레이션​

기존 메서드새 동등 항목비고
getValue(mode)getValue(encoder)인코더가 문자열 모드를 대체합니다. 인코더 사용 시 별도 import가 필요합니다
setValue(value, mode)setValue(value, encoder)인코더가 문자열 모드를 대체합니다. 인코더 사용 시 별도 import가 필요합니다
getStats()제거됨대체 항목 없음. 수동 로직 필요
getEditorAPI()제거됨내부 전용. 공개 API를 사용하세요
fire()제거됨exec()와 intercept()로 대체됨
on(), detach()✅ 유지됨 (api.on, api.detach)이제 richtext.api를 통해 접근합니다
fullScreen()제거됨fullscreenMode 설정 프로퍼티를 사용하세요
exitFullScreen()제거됨fullscreenMode 설정 프로퍼티를 사용하세요
paint()제거됨더 이상 필요하지 않습니다
destructor()✅ 계속 사용 가능변경 없음
setConfig()✅ 신규실시간 설정 업데이트를 지원합니다
setLocale()✅ 신규동적 로케일 전환을 지원합니다
getReactiveState()✅ 신규반응형 상태 추적을 지원합니다
getState()✅ 신규현재 정적 설정 상태를 제공합니다
intercept()✅ 신규내부 액션을 가로챌 수 있습니다
exec()✅ 신규내부 액션을 실행합니다

- setValue() / getValue()​

Before 2.0
...
editor.setValue("<p>Hello</p>", "html");
editor.getValue("text");
From 2.0
const fromTextEncoder = richtext.text.fromText; 
const fromHTMLEncoder = richtext.html.fromHTML; 

const toTextEncoder = richtext.text.toText; 
const toHTMLEncoder = richtext.html.toHTML; 
...
editor.setValue("<p>Hello</p>", fromHTMLEncoder);
editor.getValue(toTextEncoder);
참고

인코더 없이 getValue()와 setValue()를 호출할 수 있습니다. 기본값은 HTML입니다.

- on / detach​

Before 2.0
editor.events.on("Change", function(action, canUndo, canRedo){
  // 여기에 코드 작성
});
 
editor.events.detach("Change");
From 2.0
editor.api.on("set-font-size", (obj) => {
    console.log(obj.fontSize);
}, { tag: "track" });

editor.api.detach("track");

- fire() → exec()와 intercept() 사용​

Before 2.0
editor.events.fire("some-event", [data]);
From 2.0
editor.api.exec("some-event", obj);

// 실행 방지
editor.api.intercept("some-event", (obj) => false);
Need more help?Contact Support