[❌삽질과 해결 그 사이]An invalid form control with name='content' is not focusable.

ckeditor5를 적용하고 생긴문제.

게시글 작성하고 글 작성하기 버튼을 누르면 콘솔창에 해당 에러와 함께 아무 반응을 하지 않는다.

 

 

게시글 입력받는 곳의 html코드는 이 상태

<textarea name="content" placeholder="내용을 입력하세요." id="editor" required></textarea>

 

 

결론적으로 이 에러가 나는 원인은 <textarea> 요소가 required 속성을 가지고 있는데, 
CKEditor가 적용되면 해당 요소가 숨겨지기 때문에 발생하는 에러라고한다.

CKEditor가 적용된 후에는 실제 <textarea>가 숨겨져 있으므로 브라우저는 이를 유효한 입력 요소로 인식하지 못하기때문에

<textarea>의 required 속성을 제거하거나 CKEditor가 빈 값을 허용하지 않도록 설정이 필요하다.

 

1. 쿨하게 required 삭제하기

<textarea name="content" placeholder="내용을 입력하세요." id="editor"></textarea>

 

2. 굳이 js로 false처리해줘서 똑똑한 척 코드 몇줄 더쓰기

<script src="{% static 'ckeditor5/build/ckeditor.js' %}"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            // 에디터가 생성된 후 required 속성을 제거
            document.querySelector('#editor').required = false;
        })
        .catch(error => {
            console.error(error);
        });
</script>

 

3. 서버 측에서 빈 값 검사하는 로직을 만들기

폼 제출 전에 JavaScript를 사용하여 빈 값을 확인하거나 Django 뷰에서 폼 검증진행

-> 실패

 

잘 안되는듯..(?)

 

일단 난 쿨하게 삭제했다.