[HTML] contenteditable

contenteditable

 

👍 contenteditable

사용자가 요소를 편집할 수 있게 하는 옵션이다.

HTML 태그를 입력하더라도 vue의 v-html과는 달리 문자열 그대로 표시한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

• true: 편집 가능 / false: 편집 불가능
• ex) textarea 의 값만 표기하고, 변경 불가능하게 할 경우
  • contenteditable = false
  • disabled

예) textarea 에 입력한 값을 div 에 표시 (vuejs)

<template>
	<div>
		<textarea v-model="contents" />
		<div contenteditable="false" disabled>{{ contents }}</div>
	</div>
</template>

<script>
export default {
	name: 'Textarea',
	data() {
		return {
			contents: '<span>테스트코드</span>'
		}
	}
}
</script>

 

• contenteditable에 css 속성 적용

// .scss
div[contenteditable] {
	border: 1px solid #eeeeee;
	max-height: 150px;
	overflow: auto;     // height 넘어가면 X,Y 자동 스크롤
	white-space: pre;   // \n 줄바꿈
	padding: 3px;

	&:disabled {   // disabled 인 경우
		cursor: default;
	}

	&:empty {      // 표시할 값이 빈 경우
		border: transparent !important;
	}
}