influence/components/sunEdt.vue

<template>
  <div>
    <div id="editor"></div>
  </div>
</template>

<script setup>
import SunEditor from "suneditor";
import "suneditor/dist/css/suneditor.min.css";
import plugins from "suneditor/src/plugins";

// Props로 초기 데이터를 받음
const props = defineProps({
  initialContent: {
    type: String,
    default: "", // 초기값 설정
  },
});

const editorInstance = ref(null);

// SunEditor 초기화
onMounted(() => {
  const editorElement = document.getElementById("editor");
  if (editorElement) {
    editorInstance.value = SunEditor.create(editorElement, {
      plugins: plugins,
      buttonList: [
        [
          //"undo",
          //"redo",
          //"font",
          "fontSize",
          //"formatBlock",
          "paragraphStyle",
          "blockquote",
          "bold",
          "underline",
          "italic",
          "strike",
          //"subscript",
          //"superscript",
          "fontColor",
          //"hiliteColor",
          //"textStyle",
          //"removeFormat",
          "outdent",
          "indent",
          "align",
          "horizontalRule",
          "list",
          "lineHeight",
          //"table",
          "link",
          "image",
          //"video",
          //"audio",
          "fullScreen",
          //"showBlocks",
          //"codeView",
          //"preview",
          //"print",
          //"save",
          //"template",
        ],
      ],
      height: "50vh",
    });

    // 초기 content 설정
    if (props.initialContent) {
      editorInstance.value.setContents(props.initialContent);
    }
  } else {
    console.error("Editor element not found");
  }
});

const getEditorContent = () => {
  if (editorInstance.value) {
    return editorInstance.value.getContents(); // SunEditor에서 편집된 내용 가져오기
  }
  return "";
};

defineExpose({
  getEditorContent,
});

// 초기 content 변경 시 SunEditor 업데이트
watch(
  () => props.initialContent,
  (newContent) => {
    if (editorInstance.value) {
      editorInstance.value.setContents(newContent || "");
    }
  }
);
</script>

<style scoped>
/* 스타일이 필요하면 여기에 추가 */
</style>