[javascript] MediumEditor에서 이미지 테두리 스타일링하기

30 Nov 2023

javascript

MediumEditor는 사용자가 쉽게 텍스트를 편집하고 서식을 지정할 수 있는 라이브 편집기입니다. 기본적으로 이미지를 삽입할 수 있는 기능을 제공하지만, 이미지에 테두리 스타일링을 추가하고 싶을 때는 별도의 작업이 필요합니다. 이번 블로그 포스트에서는 MediumEditor에서 이미지에 테두리를 추가하는 방법에 대해 알아보겠습니다.

1. CSS 스타일링을 사용한 테두리 추가

MediumEditor는 이미지를 <img> 태그로 삽입하므로, 해당 태그의 스타일을 조정하여 이미지에 테두리를 추가할 수 있습니다. 다음과 같은 CSS 스타일을 사용하면 이미지에 테두리를 추가할 수 있습니다.

.medium-editor-image img {
    border: 2px solid blue;
}

위의 코드는 MediumEditor에서 이미지 태그를 감싸는 클래스 .medium-editor-image 내부의 <img> 태그에 대해 테두리를 추가하는 스타일을 정의합니다. 원하는 테두리 스타일을 추가로 설정할 수 있습니다.

2. MediumEditor 옵션 설정

MediumEditor를 사용할 때 이미지에 테두리를 추가하기 위해서는 MediumEditor의 옵션을 설정해야 합니다. 옵션에서 extensions 속성을 사용하여 커스텀 확장 기능을 추가할 수 있습니다. 다음은 이미지 테두리를 추가하기 위한 MediumEditor의 옵션 설정 예입니다.

var editor = new MediumEditor('.editable', {
    **extensions: {
        'image-border': new ImageBorderExtension()
    },**
    toolbar: {
        buttons: ['bold', 'italic', 'image']
    }
});

위의 코드에서 extensions 속성에 image-border라는 확장 기능을 추가하고, toolbar 속성에 이미지 삽입 버튼을 포함시켜 사용자가 이미지를 삽입할 수 있도록 설정합니다.

3. 커스텀 확장 기능 작성

테두리를 추가하기 위해 자체 커스텀 확장 기능을 작성해야합니다. 다음은 ImageBorderExtension 클래스의 코드 예입니다.

/** @constructor */
var ImageBorderExtension = function () {
    this.parent = true;
    this.name = 'image-border';
    this.init();
};
ImageBorderExtension.prototype = {
    init: function () {
        var that = this;
        MediumEditor.extensions.button.prototype.init.call(this);
        this.classApplier = rangy.createClassApplier('medium-editor-image border', {
            elementTagName: 'div',
            normalize: true,
            onElementCreate: function (el) {
                el.setAttribute('contenteditable', false);
                el.setAttribute('draggable', true);
                el.innerHTML = '<div class="image-border-content">' + el.innerHTML + '</div>';
            },
            applyToEditableOnly: true
        });
    },
    handleClick: function (event) {
        var target = this.document.querySelectorAll('.medium-editor-image img');
        if (target) {
            this.classApplier.toggleSelection();
        }
    }
};

위의 코드는 ImageBorderExtension 클래스를 정의하고 테두리 스타일을 추가하기 위한 필요한 메소드를 구현합니다. 해당 클래스는 MediumEditor 확장 기능 클래스를 상속합니다. 테두리 효과를 적용할 때 버튼을 클릭하면 해당 이미지가 토글되도록 구현되었습니다.

이렇게 작성한 커스텀 확장 기능 코드를 이전에 설정한 옵션에서 호출하면 이미지에 테두리 스타일링이 적용됩니다.

마치며

MediumEditor에서 이미지에 테두리 스타일링하는 방법을 알아보았습니다. CSS 스타일링을 사용하여 이미지에 테두리를 추가하고, MediumEditor의 옵션을 설정하고 커스텀 확장 기능을 작성하는 방법을 소개했습니다. 이를 참고하여 MediumEditor에서 원하는 스타일링을 적용해보세요!