드래곤 에디터는 그냥 블로그에 쓸 이지윅 에디터가 필요해서 만들었습니다.
커스터마이징이 가능하며 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>- 이미지 삽입
editor.value.addImageBlock({
src: string;
width: number;
height: number;
webp: boolean;
});- 저장
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>- 스타일 설정
스타일의 경우 컴포넌트에서 다음과 같이 명령어를 사용할 수 있습니다.
해당되는 스타일이 존재하지 않을 경우 클레스에 값을 부여합니다.
editor.value.setStyles("decorationBold");- 스타일 리스트
alignLeft: 왼쪽 정렬alignCenter: 가운데 정렬alignRight: 오른쪽 정렬decorationBold: 볼드decorationItalic: 이텔릭decorationUnderline: 밑줄decorationStrikethrough: 취소선
- 저장
editor.value.updateBlockData();
// do save- 포커스
editor.value.focus();<tempalte>
<DragonEditorViewer :content="contentData"/>
</tempalte>
<script setup lang="ts">
const contentData = ref([]); // Save Data for Editor
</script>- content : This props is must be Array in Editor data.
- mediaURL (Option) : This props is pre URL in Media.