[Plugin] Floala

gminnimk·2025년 4월 1일

Froala Editor는 강력하고 직관적인 WYSIWYG HTML 에디터. Vue 3와 함께 사용하면 동적인 리치 텍스트 편집 기능을 손쉽게 구현할 수 있습니다.

1. 개요

Froala Editor: 다양한 텍스트 편집, 이미지/동영상 삽입, 스타일링 기능 등을 제공하는 리치 텍스트 에디터
통합 효과: Vue 3의 컴포넌트 기반 구조와 Froala의 편리한 에디터 기능을 결합해 빠르게 인터랙티브한 에디터를 구축

2. 설치 및 초기 세팅

2.1 Vue 3 프로젝트 생성

터미널에서 다음 명령어로 새 Vue 3 프로젝트를 생성합니다.

npm install -g @vue/cli
vue create my-froala-vue-app

2.2 Froala Vue 플러그인 설치

프로젝트 디렉터리로 이동 후, Froala Vue 플러그인을 설치합니다.

cd my-froala-vue-app
npm install vue-froala-wysiwyg --save

참고: 최신 Froala Vue SDK는 Vue 3를 지원합니다.

3. 통합 단계

3.1 main.js 파일 설정

main.js에서 Froala 관련 JS와 CSS 파일을 임포트한 후, Vue 플러그인으로 등록합니다.

import { createApp } from 'vue'
import App from './App.vue'

// Froala Editor 플러그인 및 CSS 파일 임포트
import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

import VueFroala from 'vue-froala-wysiwyg';

const app = createApp(App);
app.use(VueFroala);
app.mount('#app');

3.2 App.vue 파일 설정

App.vue 파일에 Froala 컴포넌트를 사용하여 에디터를 초기화합니다.

<template>
  <div id="app">
    <!-- Froala 에디터 컴포넌트 사용 -->
    <froala id="edit" :tag="'textarea'" :config="config" v-model:value="model"></froala>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 에디터 옵션 설정 (높이, 이벤트 등)
      config: {
        heightMin: 300,
        events: {
          // 에디터 초기화 완료 시 콘솔에 메시지 출력
          initialized: function () {
            console.log('Froala Editor initialized');
          }
        }
      },
      // 에디터에 표시할 초기 HTML 콘텐츠
      model: '<i>Edit Your Content Here!</i>'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

핵심 포인트:

<froala> 컴포넌트의 :tag 속성은 에디터가 어떤 HTML 태그에서 초기화될지를 결정합니다.

:config로 Froala의 다양한 옵션(예: 높이, 이벤트 등)을 설정할 수 있습니다.

v-model:value로 에디터 내용과 Vue 데이터 바인딩을 구현합니다.

4. 사용법 및 커스터마이징

4.1 양방향 데이터 바인딩

v-model:value를 사용해 에디터 내용과 Vue 데이터(model)를 실시간으로 동기화할 수 있습니다.
에디터 내용이 변경되면 model 값도 업데이트되고, 다른 컴포넌트에서도 쉽게 사용할 수 있습니다.

4.2 에디터 옵션 및 이벤트

옵션 설정: placeholderText, charCounterCount 등 Froala에서 제공하는 다양한 옵션을 config 객체로 전달할 수 있습니다.
이벤트 등록: 에디터 내 이벤트(예: focus, contentChanged 등)를 config.events에 등록하여 원하는 동작을 추가할 수 있습니다.

예시:

config: {
  placeholderText: 'Edit Your Content Here!',
  charCounterCount: false,
  events: {
    'froalaEditor.focus': function(e, editor) {
      console.log('Editor focused:', editor.selection.get());
    }
  }
}

4.3 커스텀 버튼 추가

Froala의 API를 활용하면 커스텀 버튼이나 도구모음을 추가할 수 있습니다. 예를 들어, 버튼 클릭 시 특정 동작(예: 콘텐츠 클리어)을 구현할 수 있습니다.

import FroalaEditor from 'froala-editor';

FroalaEditor.DefineIcon('clear', { NAME: 'remove', SVG_KEY: 'remove' });
FroalaEditor.RegisterCommand('clear', {
  title: 'Clear HTML',
  focus: false,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.set('');
    this.events.focus();
  }
});