spectrum learns to dig

contenteditable은 말 그대로 해당 tag의 content를 수정가능한 상태로 만드는 태그인데 https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 사실 WYSWYG이 이 글대로 쉬운 작업은 아니다. 최종적으로 Meteor의 reactive data 연동하는 것까지를 목표로 잡아보자. 일단 div[contenteditable=true]를 하나 만들고 테두리를 제거하기 위해 [contenteditable=true] {   outline: none; } 를 css에 잡자. contenteditable의 테두리는 레이아웃을 깨뜨리지 않기 때문에 border를 사용하지 않고 있다는 걸 알 수 있다. 하고보니 버튼 등등이 눌렀을 때 테두리가 생기는 것도 싫어서 * {   outline: none; } [contenteditable=true] {   outline: solid 1px #cbcbcb;   padding: 0.5em; } 이렇게 일단 해보자. 빠르게 버튼을 만들어서 기능을 더해보는데 대부분의 기능은  https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands  에서 구현할 수 있다. Bold, 정렬 이런 건 괜찮은데 image가 제일 중요. 손을 좀 건드려야하는데 그 이유는 이미지 실제는 항상 엄청 크기가 큰게 들어올 수 있기 때문에 아무래도 불편하다. 크기를 지정해서 해주면 좋은데 그러려면 그냥 insertImage를 쓰면 안되고 해당 커맨드가 들어왔을 때 createElement를 통해서 image 객체를 만들고 현재 커서 위치에 넣도록 하는게 좋다.   insertImage : (url)->     console.log "#{url...