Page History

모든 편집용 Model의 APIModel Element의 부모 Class입니다. Element Model에서 제공되는 API는 모든 하위 Element에서 동일하게 사용 할 수 있습니다.아래와 같은 편집 API를 기본적으로 모델을 다루는데 필요한 속성과 메소드를 제공합니다.

/**
* id를 반환합니다.
* @returns {String}
*/
get id() {
return this.__id__;
}

/**
* type을 반환합니다.
* @returns {String}
*/
get type() {
return this.__getElement__().getType();
}

/**
* element를 반환합니다.
* @private
* @returns {Element} api 모델
*/
__getElement__() {
return this.__editor__.getSEModelManager().getElement(this.id);
}

/**
* 현재 인덱스를 반환합니다.
* @returns {Number}
*/
get index() {
return this.__getElement__().index();
}

/**
* 부모 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get parent() {
return this.__APIModel__.get(this.__getElement__().parent());
}

/**
* 다음 형제의 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get nextSibling() {
return this.__APIModel__.get(this.__getElement__().nextSibling());
}

/**
* 이전 형제의 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get previousSibling() {
return this.__APIModel__.get(this.__getElement__().previousSibling());
}

/**
* 첫번째 자식 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get firstChild() {
return this.__APIModel__.get(this.__getElement__().firstChild());
}

/**
* 마지막 자식 api 모델을 반환합니다.
* @returns {Element} api 모델
*/
get lastChild() {
return this.__APIModel__.get(this.__getElement__().lastChild());
}

/**
* 자식 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get children() {
return this.__getElement__().getChildren().map(el => this.__APIModel__.get(el));
}

/**
* 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get siblings() {
return this.__getElement__().siblings().map(el => this.__APIModel__.get(el));
}

/**
* 다음 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get nextSiblings() {
return this.__getElement__().nextSiblings().map(el => this.__APIModel__.get(el));
}

/**
* 이전 형제 api 모델을 배열로 반환합니다.
* @returns {Element[]} api 모델[]
*/
get previousSiblings() {
return this.__getElement__().previousSiblings().map(el => this.__APIModel__.get(el));
}

/**
* 조건에 맞는 api 모델을 반환합니다.
* @param {Function} condition
* @returns {Element} api 모델
*/
closest(condition) {
if (!util.isFunction(condition)) {
return null;
}
let elem = this;
while (elem && !condition(elem)) {
elem = elem.parent;
}
return elem;
}

/**
* id를 수정합니다.
* @param {String} id
*/
setId(id) {
const contentsManager = this.__editor__.getContentsManager();
const elElement = contentsManager.getHTMLElement(this.id);
if (!elElement || !elElement.id) {
throw new Error(`id를 설정 할 수 없습니다.`);
}

const element = this.__getElement__();
const renderTarget = this.__getRenderTarget__(element);
this.__preExcute__(this.setId.name, [renderTarget]);
elElement.setAttribute('id', id);
element.setId(id);
this.__setId__(id);
this.__postExcute__([renderTarget]);
}

/**
* 스타일을 설정합니다.
* @param {String} cssText
*/
setStyle(cssText) {
const element = this.__getElement__();
if (!element.setStyle) {
throw new Error(`style을 설정 할 수 없습니다.`);
}
const originStyle = element.getStyle();
const newStyle = util.getStyleFromCssText(cssText, this.type);
const renderTarget = this.__getRenderTarget__(element);

this.__preExcute__(this.setStyle.name, [renderTarget]);
element.setStyle(util.merge(originStyle, newStyle));
this.__postExcute__([renderTarget]);
}

Properties

id 

• <String>

Element의 ID

type

• <String>

Element의 Type

index

• <Number>

현재 index

parent

• <Element>

부모 API 모델

nextSibling

• <Element>

다음 형제 API 모델

previousSibling

• <Element>

이전 형제 API 모델

firstChild

• <Element>

첫번째 자식 API 모델

lastChild

• <Element>

마지막 자식 API 모델

children

• <Element[]>

자식 API 모델들 (배열)

siblings

• <Element[]>

형제 API 모델들 (배열)

nextSiblings

• <Element[]>

다음 형제 API 모델들 (배열)

previousSiblings

• <Element[]>

이전 형제 API 모델들 (배열)

className

• <String>

Element의 className

attributes

• <String>

Element의 attributes(id, class, style 제외)

options

• <Object>
  • skipUndoRedo<Boolean>
  • skipRendering<Boolean>

Options객체

skipUndoRedo

• <Boolean>

편집시 undo, redo를 생략할지 여부

skipRendering

• <Boolean>

편집시 rendering을 생략할지 여부

Methods

closest(condition)

• condition <Function> 각 요소를 시험할 함수
  • condition 함수의 첫번째 인자 : 현재 API 모델 Element
  • condition 함수의 return : <Boolean>
• Returns: <Element> API 모델 Element

상위 API 모델 중 조건에 맞는 API 모델을 반환합니다.

var run = editor.getAPIModelById('id');
var body = run.closest(function(apiModel){
	return apiModel.type === 'Body';
});

setId(id)

• id <String> 모델에 설정할 ID 값

ID를 설정합니다.

var element = editor.getAPIModelById('id');
element.setId('test_setId');

setStyle(cssText)

• cssText <String> HTML DOM상에서 style 속성에 들어간 문자열

스타일을 설정합니다.

var element = editor.getAPIModelById('id');
element.setStyle('background-color: red;');

empty()

자식 요소들을 모두 제거합니다.

var element = editor.getAPIModelById('id');
element.empty();

addClass(className)

• className <String> HTML DOM상에서 class 속성에 들어간 문자열

className을 추가합니다.

var element = editor.getAPIModelById('id');
element.addClass('synap_editor');

removeClass(className)

• className <String> HTML DOM상에서 class 속성에 들어간 문자열

className을 제거합니다.

var element = editor.getAPIModelById('id');
element.removeClass('synap_editor');

hasClass(className)

• className <String> HTML DOM상에서 class 속성에 들어간 문자열

className이 있는지 확인합니다.

var element = editor.getAPIModelById('id');
element.hasClass('synap_editor');

setAttribute(name, value)

• name <String> HTML DOM상에 들어갈 속성명
• value <String> HTML DOM상에 들어갈 속성값

속성을 추가합니다.

var element = editor.getAPIModelById('id');
element.setAttribute('name', 'synap_editor');

removeAttribute(name)

• name <String> HTML DOM상에 들어갈 속성명

속성을 제거합니다.

var element = editor.getAPIModelById('id');
element.setAttribute('name');