KO / EN

DragonEditor

드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다. 커스터마이징이 가능하며 Nuxt.js만 지원합니다.

사용법

에디터

<tempalte>
  <DragonEditor v-model="contentData" :option="option" ref="editor" />
</tempalte>

<script setup lang="ts">
const editor = ref();
const contentData = ref([]);
const option = ref({}); // 선택사항
</script>

컴포넌트 명령어

1. 이미지 삽입

editor.value.addImageBlock({
    src: string;
    width: number;
    height: number;
    webp: boolean;
});

2. 저장

editor.value.updateBlockData();
// do save

코멘트

<tempalte>
  <DragonEditorComment v-model="commentData" ref="editor" />
</tempalte>

<script setup lang="ts">
const editor = ref();
const commentData = ref({
    classList: [],
    content: "",
});
</script>

컴포넌트 명령어

1. 스타일 설정

스타일의 경우 컴포넌트에서 다음과 같이 명령어를 사용할 수 있습니다. 해당되는 스타일이 존재하지 않을 경우 클레스에 값을 부여합니다.

editor.value.setStyles("decorationBold");

2. 스타일 리스트

• alignLeft : 왼쪽 정렬
• alignCenter : 가운데 정렬
• alignRight : 오른쪽 정렬
• decorationBold : 볼드
• decorationItalic : 이텔릭
• decorationUnderline : 밑줄
• decorationStrikethrough : 취소선

2. 저장

editor.value.updateBlockData();
// do save

3. 포커스

editor.value.focus();

Viewer

<tempalte>
  <DragonEditorViewer :content="contentData"/>
</tempalte>

<script setup lang="ts">
const contentData = ref([]); // Save Data for Editor
</script>

Props

• content : This props is must be Array in Editor data.
• mediaURL (Option) : This props is pre URL in Media.