UI 가이드

다크 모드

ScEditor ​

ScEditor는 WYSIWYG(What You See Is What You Get) 방식의 리치 텍스트 에디터로, 사용자 친화적인 인터페이스를 제공하여 다양한 형식의 콘텐츠를 쉽게 작성하고 편집할 수 있도록 돕습니다. Tiptap 에디터를 기반으로 하며, 기본적인 텍스트 서식, 목록, 이미지 삽입, 링크 등 다양한 기능을 지원합니다.

✅ 기본 사용법 ​

아래는 `ScEditor` 컴포넌트의 기본 사용 예시입니다. `v-model`를 사용하여 에디터의 콘텐츠와 `content` 변수를 동기화합니다.



현재 HTML 내용:
<h3>Welcome to ScEditor!</h3><p>Start writing your <strong>amazing content</strong> here.</p><ul><li>Item 1</li><li>Item 2</li></ul>
vue
<sc-editor v-model="content" />

<div class="mt-5 text-sm">현재 HTML 내용:</div>
<pre class="code-block" style="white-space: pre-wrap; word-break: break-all; overflow-x: auto;">{{ content }}</pre>

<script setup>
  import { ref } from 'vue';

  const content = ref('<h3>Welcome to ScEditor!</h3><p>Start writing your <strong>amazing content</strong> here.</p><ul><li>Item 1</li><li>Item 2</li></ul>');

  function getComplexContentHtml() {
    return `<h1>My Awesome Document</h1><p data-text-align="center">This is a <strong>rich text editor</strong> built with <i>Tiptap</i>.</p><p>You can write paragraphs, add <mark>highlights</mark>, and even include <code>inline code</code>.</p><blockquote><p>This is a blockquote. It's great for citing sources or adding emphasis.</p></blockquote><p>Here's a list of features:</p><ul><li>Bold, Italic, Strike, Code, Highlight</li><li>Headings (H1, H2)</li><li>Bullet and Numbered Lists</li><li>Blockquotes and Code Blocks</li><li>Text alignment (left, center, right, justify)</li><li>Links: <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue.js Official Site</a></li>`;
  }

  const complexContent = ref(getComplexContentHtml());

</script>

🛠️ 속성 (Props) ​

Prop 이름타입기본값설명
modelValueString'<p>Hello, this is the <strong>Tiptap editor</strong>!</p><p data-text-align="center">Enter your <b>content</b> here.</p>'에디터의 초기 콘텐츠 및 v-model을 통한 양방향 바인딩 데이터입니다. HTML 문자열 형식이어야 합니다.

📤 이벤트 (Emits) ​

이벤트 이름파라미터설명
update:modelValue(html: string)에디터의 내용이 변경될 때 발생합니다. 변경된 HTML 문자열을 전달합니다.

✨ 주요 기능 ​

ScEditor는 Tiptap 에디터의 강력한 기능을 활용하여 다양한 텍스트 편집 기능을 제공합니다.

▸ 텍스트 서식 ​

Bold, Italic, Strike, Code, Highlight 등의 텍스트 서식을 툴바 버튼을 통해 쉽게 적용할 수 있습니다.

  • Bold: 텍스트를 굵게 만듭니다. Ctrl + B 단축키를 사용할 수 있습니다.
  • Italic: 텍스트를 기울입니다. Ctrl + I 단축키를 사용할 수 있습니다.
  • Strike: 텍스트에 취소선을 긋습니다. Ctrl + Shift + X 단축키를 사용할 수 있습니다.
  • Code: 인라인 코드 블록을 만듭니다. Ctrl + E 단축키를 사용할 수 있습니다.
  • Highlight: 텍스트에 배경색 하이라이트를 적용합니다.

▸ 블록 요소 ​

Paragraph, Heading (제목 1, 2), Bullet List, Numbered List, Blockquote, Code Block, Horizontal Rule, Hard Break 등의 블록 요소를 추가할 수 있습니다.

  • Paragraph: 일반 단락을 만듭니다.
  • Heading: Ctrl + Alt + 1 (H1), Ctrl + Alt + 2 (H2) 단축키를 사용할 수 있습니다.
  • Bullet List: 글머리 기호 목록을 만듭니다. Ctrl + Shift + 8 단축키를 사용할 수 있습니다.
  • Numbered List: 번호 목록을 만듭니다. Ctrl + Shift + 7 단축키를 사용할 수 있습니다.
  • Blockquote: 인용구 블록을 만듭니다. Ctrl + M 단축키를 사용할 수 있습니다.
  • Code Block: 코드 블록을 만듭니다. Ctrl + Alt + C 단축키를 사용할 수 있습니다.
  • Horizontal Rule: 구분선을 삽입합니다.
  • Hard Break: 강제 줄바꿈을 합니다. Shift + Enter 단축키를 사용할 수 있습니다.

▸ 텍스트 정렬 ​

Align Left, Align Center, Align Right, Justify 기능을 통해 단락의 텍스트 정렬을 변경할 수 있습니다. Clear Alignment 버튼으로 정렬을 초기화할 수 있습니다.

▸ 링크 및 이미지 삽입 ​

  • 링크 (Link): Set Link 버튼을 클릭하여 URL을 입력하고 텍스트에 하이퍼링크를 삽입할 수 있습니다. 이미 삽입된 링크는 Unset Link 버튼으로 해제할 수 있습니다. Ctrl + Shift + L 단축키를 사용할 수 있습니다.
  • 이미지 (Image):
    • 파일 이미지 추가: 파일 아이콘 버튼을 클릭하여 로컬 파일을 업로드하여 이미지를 삽입할 수 있습니다.
    • URL 이미지 추가: URL 아이콘 버튼을 클릭하여 이미지 URL을 입력하고 외부 이미지를 삽입할 수 있습니다.

✨ 사용 예시 모음 (다양한 기능 활용) ​

🔳 슬롯 (Slots) ​

현재 ScEditor는 슬롯을 지원하지 않습니다.

🎨 스타일 클래스 ​

ScEditor는 자체적인 내부 스타일을 가지고 있으며, Tiptap의 기본 ProseMirror 클래스와 함께 동작합니다. 추가적인 스타일링이 필요한 경우, 컴포넌트의 상위 Wrapper나 전역 CSS를 통해 제어할 수 있습니다.

📝 기타 참고사항 ​

  • ScEditor는 내부적으로 Tiptap의 다양한 확장(Extension)을 활용하여 기능을 제공합니다.
  • modelValue는 에디터의 전체 HTML 콘텐츠를 나타냅니다.
  • GoogleIcon 컴포넌트를 사용하기 위해서는 Google Material Icons 폰트가 프로젝트에 적용되어 있어야 합니다.