• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    미해결

textarea 의미 에 대해서

20.03.07 15:04 작성 조회수 175

0

안녕하세요.영상 잘보고 있습니다.

질문이 있어 이렇게 글을 올립니다.

영상을 보면서 editor 툴을 스크립트 하여 js파일에 작업을 마쳤습니다. 

문제는 뷰단에서 id="editor" 위에 textarea 가 계속 남아 있습니다. 

영상속에는 textarea 가 남아있지 않은데 말이죠.

<div class="editor uk-align-center">

<textarea name="content"></textarea>

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

</div>

스크립트 경로는 물론 똑같이 했구요.

<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/balloon-block/ckeditor.js"></script>

textarea 따로 hidden 처리 한것인가요? 

또한 textarea가 아닌 id="content" 에디터에 글을 적게 되는데 이렇게 되면 textarea의 무슨 기능이 있는지 궁금하네요 

[문제 이미지]

답변 1

답변을 작성해보세요.

1

안녕하세요!

1. 

네, textareahidden 처리 한 것이 맞습니다. 이는 CSS 에서 해준것입니다. app.css 를 참고하면 다음의 줄이 있는 것을 볼 수 있습니다.

#app #main__form-post form textarea { display: none; }

2.

글 자체는 id = editor 에 적어내게 되고, 전송할 때는 자바스크립트에 의해 editor 의 내용이 textarea 에 복사됩니다. CKEditor 5 에서 어떤 에디터는 textarea 에 자체적으로 바인딩할 수 있으나 어떤 에디터는 불가한데, 강의에 사용한 balloon  이 그렇습니다. app.js 에서 아래의 코드가 에디터에 적은 내용들을 textarea 에 복사합니다.

const $form = document.querySelector('#main__form-post > form')
$form.addEventListener('submit', e => {
    const data = document.createTextNode(editor.getData())
    document.querySelector('#main__form-post textarea[name=content]').appendChild(data)
})