audi/app/components/admin/SunEditor.vue

<template>
  <div class="admin--suneditor-wrapper">
    <div ref="editorElement" class="admin--suneditor"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import suneditor from 'suneditor'
import 'suneditor/dist/css/suneditor.min.css'
import plugins from 'suneditor/src/plugins'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: String,
    default: '400px'
  },
  placeholder: {
    type: String,
    default: '내용을 입력하세요...'
  }
})

const emit = defineEmits(['update:modelValue'])

const editorElement = ref(null)
let editorInstance = null

onMounted(() => {
  if (editorElement.value) {
    editorInstance = suneditor.create(editorElement.value, {
      plugins: plugins,
      height: props.height,
      buttonList: [
        ['undo', 'redo'],
        ['font', 'fontSize', 'formatBlock'],
        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
        ['fontColor', 'hiliteColor'],
        ['removeFormat'],
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'table'],
        ['link', 'image', 'video'],
        ['fullScreen', 'showBlocks', 'codeView'],
        ['preview', 'print']
      ],
      font: ['Arial', 'Courier New', 'Georgia', 'Tahoma', 'Trebuchet MS', 'Verdana', 'AudiType'],
      formats: ['p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
      colorList: [
        '#ff0000', '#ff5e00', '#ffe400', '#abf200', '#00d8ff', '#0055ff', '#6600ff', '#ff00dd',
        '#000000', '#ffffff', '#888888', '#cccccc'
      ],
      imageResizing: true,
      imageHeightShow: true,
      imageWidth: '100%',
      imageUploadUrl: '/api/upload/image',
      placeholder: props.placeholder
    })

    // 초기값 설정
    if (props.modelValue) {
      editorInstance.setContents(props.modelValue)
    }

    // 내용 변경 이벤트
    editorInstance.onChange = (contents) => {
      emit('update:modelValue', contents)
    }
  }
})

// modelValue 변경 감지
watch(() => props.modelValue, (newValue) => {
  if (editorInstance && editorInstance.getContents() !== newValue) {
    editorInstance.setContents(newValue || '')
  }
})

onBeforeUnmount(() => {
  if (editorInstance) {
    editorInstance.destroy()
  }
})
</script>

<style scoped>
.admin--suneditor-wrapper {
  width: 100%;
}

.admin--suneditor-wrapper :deep(.sun-editor) {
  background: var(--admin-bg-tertiary);
  border: 1px solid var(--admin-border-color);
  border-radius: 6px;
}

.admin--suneditor-wrapper :deep(.se-toolbar) {
  background: var(--admin-bg-secondary);
  border-bottom: 1px solid var(--admin-border-color);
}

.admin--suneditor-wrapper :deep(.se-btn) {
  color: var(--admin-text-secondary);
}

.admin--suneditor-wrapper :deep(.se-btn:hover) {
  background: var(--admin-bg-tertiary);
  color: var(--admin-text-primary);
}

.admin--suneditor-wrapper :deep(.se-wrapper) {
  background: var(--admin-bg-tertiary);
  color: var(--admin-text-primary);
}

.admin--suneditor-wrapper :deep(.se-wrapper-inner) {
  background: var(--admin-bg-tertiary);
  color: #ffffff;
}

.admin--suneditor-wrapper :deep(.se-wrapper-inner.se-wrapper-wysiwyg) {
  background: var(--admin-bg-tertiary);
  color: #ffffff !important;
}

/* 에디터 내부 모든 텍스트 요소 - 기본 흰색 */
.admin--suneditor-wrapper :deep(.se-wrapper-inner p),
.admin--suneditor-wrapper :deep(.se-wrapper-inner div),
.admin--suneditor-wrapper :deep(.se-wrapper-inner span),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h1),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h2),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h3),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h4),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h5),
.admin--suneditor-wrapper :deep(.se-wrapper-inner h6),
.admin--suneditor-wrapper :deep(.se-wrapper-inner li),
.admin--suneditor-wrapper :deep(.se-wrapper-inner ul),
.admin--suneditor-wrapper :deep(.se-wrapper-inner ol),
.admin--suneditor-wrapper :deep(.se-wrapper-inner blockquote),
.admin--suneditor-wrapper :deep(.se-wrapper-inner pre),
.admin--suneditor-wrapper :deep(.se-wrapper-inner a),
.admin--suneditor-wrapper :deep(.se-wrapper-inner strong),
.admin--suneditor-wrapper :deep(.se-wrapper-inner em),
.admin--suneditor-wrapper :deep(.se-wrapper-inner code) {
  color: #ffffff;
}

.admin--suneditor-wrapper :deep(.se-placeholder) {
  color: var(--admin-text-muted) !important;
}
</style>