2019년 5월 15일, Froala가 새롭게 Froala Editor 3.0을 릴리스 하였습니다. 2014년도에 처음 선보인 후 3번째 위지윅 에디터이며 Froala Editor 2.0의 개발로부터 4년만에 선보이는 새로운 에디터 입니다. 이 글에서는 Froala Editor 3.0의 주요 특징과 변화된 내용을 간단히 소개해 보겠습니다.
Froala WYSIWYG HTML Editor 3.0
UI
디자인이 새롭게 바뀌었습니다. Froala Editor는 미려한 디자인과 직관적인 UI 때문에 시중에 나와있는 어떤 에디터보다도 우수한 평가를 받고 있는데요. 3.0에서는 디자인이 현대 트렌드에 맞춰 심플하고 플랫한 디자인으로 변경 되었습니다.
Toolbar
가장 큰 특징으로는 툴바의 정의가 바뀌었다는 점인데요. 1.0과 2.0에서는 좌측부터 일렬로 버튼을 정의하고 각 디바이스 별로 표시하는 방법이었는데, 3.0에서는 버튼 그룹의 개념이 새롭게 생겨서 역할에 맞는 버튼을 따로 모아서 통합해서 보여주는 방식으로 바뀌었습니다. 또한 많은 버튼을 기본 툴바에 전부 표시하지 않고 세부 툴바(Second Toolbar)로 숨겨놓고 그룹별 More 버튼을 통해 사용할 수 있도록 하였습니다. 물론 기존의 일렬 버튼 정의도 툴바 설정으로 사용 가능합니다.
ICON
이제까지는 font awesome 4를 기본 아이콘으로 사용했으나 3.0부터는 자체 제작한 SVG 아이콘으로 변경하였습니다. 때문에 3.0부터는 font awesome을 호출할 필요가 없습니다. 또한 구조 자체가 쉽게 아이콘을 커스터마이즈 가능하도록 되어있기 때문에 필요한 아이콘을 간단히 변경 가능합니다. 기존에 사용했던 font awsome은 옵션 설정을 통해 계속 사용 가능합니다.
플러그인
3.0부터는 그룹 개념을 사용하기 때문에 아이콘 계열의 이모티콘, font awesome, 특수 문자 같은 플러그인이 이제까지 한화면에 많은 아이콘을 나열했었는데 그룹별로 정리되어서 훨씬 찾기 쉽게 변경 되었습니다.
2.0 Emoticon 플러그인 
3.0 Emoticon 플러그인
코드
개발 코드에서는 꽤 중요한 변경사항이 몇가지 있습니다.
jQuery 제거
3.0부터는 jQuery를 호출하지 않아도 사용이 가능해졌습니다. 때문에 사용방법이 아래와 같이 변경 됩니다. jQuery의 호출이 제거되었기 때문에 사용하는 사이트에서 불필요한 jQuery 호출 없이 자바스크립트의 표준 방법으로 에디터를 사용할 수 있게 되었습니다.
하지만 그렇다고 jQuery 코드가 완전히 제거 된 건 아닙니다. 코어의 내부 코드의 대부분을 차지했던 jQuery 코드를 싹다 교체하기란 쉬운게 아닐 겁니다. jQuery의 중요 함수를 에디터 코어 내부에 선언하여 기존 코드의 변경을 최소하고 사용자의 시스템과의 통합에서 jQuery의 의존도를 낮추는 선에서 개선이 이뤄졌다고 생각합니다.
<script>
$(function() {
$('#edit')
.on('froalaEditor.initialized', function (e, editor) {
console.log('initialized');
})
.froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript']
});
});
</script>Froala Editor 2.0 사용방법
<script>
(function () {
new FroalaEditor('#edit', {
toolbarButtons: [['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript'], []],
events: {
'initialized': function () {
console.log(this);
})
}
})
</script>Froala Editor 3.0 사용방법
Toolbar 설정
툴바 설정은 UI에서 설명한대로 그룹 개념이 새로이 생겼기 때문에 그룹별 정의로 선언이 필요합니다. 버튼을 일렬로 표시하고자 할 경우도 새로이 바뀐 방식으로 선언해줌으로써 기존 툴바 형태 그대로 사용할 수 있습니다. 다만, 버튼간 구분 기능 '|'과 줄바꿈 기능 '-'은 3.0에서는 사용할 수 없습니다.
<script>
(function () {
new FroalaEditor("#edit", {
toolbarButtons: {
// Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 3
},
moreParagraph: {
buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
align: 'left',
buttonsVisible: 3
},
moreMisc: {
buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
align: 'right',
buttonsVisible: 2
}
}
})
})
</script>그룹 버튼 적용 예
<script>
(function () {
new FroalaEditor("#edit", {
toolbarButtons: [
['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR', 'undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
[],
[],
[]
]
})
})
</script>일렬 버튼 적용 예
라이선스 키
3.x용 라이선스 키가 새로이 발급됩니다. 2.x에서 사용했던 라이선스 키는 2.9.5까지만 사용 가능하며 3.0부터는 froala 공식 홈페이지 Activate Editor License에서 확인 하실 수 있습니다.
소스맵
css, js에 sourceMappingURL이 선언되었습니다. css는 sass를 기본 지원하고 있는데 디버깅 용도로 맵핑이 이뤄졌고 js 역시 코어 파일에 많은 플러그인을 통합하였기 때문에 디버깅에 사용할 목적으로 적용한 것 같습니다. 때문에 코드의 수정과 디버깅 목적으로 원본 코드 호출 시에는 브라우저 개발자 모드에서 소스맵 동작을 중지하고 사용하시는게 좋습니다.
이상으로 주요 내용을 간단히 소개해 봤습니다. Froala Editor 3.0은 기존의 기능을 최대한 유지하면서 디자인요소만 변화시켰기 때문에 2.x에서 개발된 플러그인의 호환성은 전혀 문제 없다고 할 수 있습니다. 그렇지만 아직 베타 버전이라 많은 부분에서 버그가 있습니다. 그렇다고 심각한 버그까지는 아닌데 아직 실 서비스에 적용할 단계는 아닌 것 같습니다. 조금 더 안정화 단계를 거치고 나면 아마도 로드맵에 있는 새로운 기능들의 개발이 이뤄지지 않을까 생각해 봅니다.
마지막으로 현재 저는 로마네스크 블로그 스킨에 Froala Editor를 적용하여 판매하고 있는데요. 이제까지 2.x를 쭉 개선하고 버전업 때마다 적용하여 배포하였지만 3.0은 에디터 접근 방법이 완전히 다르기 때문에 거의 새로 개발하는 수준의 진행이 필요합니다. 때문에 로마네스크 블로그 스킨에 포함된 에디터는 버그 개선의 수준으로만 패치를 진행하고 3.0으로의 판올림은 진행하지 않을 계획 입니다.
현재 로마네스크 에디터 스킨을 기획 중에 있는데 예전에 소개했던대로 Froala Editor 3.0을 기반으로 제가 소개했던 로드맵을 진행할 계획이며 판매 형태는 기존과 다르게 라이선스 키를 포함하지 않고 순수 에디터 스킨으로써 GPL이나 MIT 라이선스로 공개배포를 생각하고 있습니다. 한마디로 라이선스 인증은 Froala에서 구입하시고 제가 배포하는 스킨을 자유로이 사용하는 형태가 될 겁니다. 로마네스크 에디터 스킨은 추후 개발이 구체화 될때 그때 다시 한번 소개 하도록 하겠습니다.