simplemde

simplemde 를 적용하기 위해서,
아래 게시판 글을 참고하여
simplemde.min.js
simplemde.min.css
두 개의 파일을 다운 받아 static 에 넣고

css 는 base.html 링크에,
js 는 question_form.html 에 load static 해서 아래와 같이 작성했는데,
운영자님처럼 안되네요 .
무엇이 잘못되었을까요?

        <div class="form-group">
            <label for="content">내용</label>
            <textarea class="form-control" name="content" id="content"
                      rows="10">{{ form.content.value|default_if_none:'' }}</textarea>
            <script src="{% static 'simplemde.min.js' %}"></script>
            <script>
                var simplemde = new SimpleMDE({ element: document.getElementById("content") });
            </script>
        </div>

sjbpsh 775

2021년 3월 13일 3:24 오후

목록으로
2개의 답변이 있습니다. 1 / 1 Page

script를 선언하는 부분을 부트스트랩 자바스크립트를 선언하는 부분과 동일한 위치에 그리고 스크립트를 실행하는 부분을 script 블록에 지정하여 해 보세요.

박응용

2021년 3월 13일 3:58 오후

답변 감사합니다. 운영자님 말씀대로 수정하니, simplemde 가 반영되는 것 같은데, 화면 모양이 운영자님과 좀 다릅니다. 아래 답변2 에, 코드 수정 전후 화면 캡처 올려놓았는데 지도 말씀 부탁드립니다. 감사합니다. - sjbpsh님, 2021년 3월 13일 5:49 오후 추천 , 대댓글

변경 전 content 화면

변경 후 content 화면

simplemde 가 적용되는 것 같기는 한데, 화면 모양이 운영자님과 좀 다릅니다.
Toolbar 처럼 나와야 하는데, 그냥 Text 로 나열됩니다.

sjbpsh

M 2021년 3월 13일 6:11 오후

+1 이건 simplemde자바스크립트는 적용이 되었는데 스타일시트는 적용이 안된걸로 보이네요. 스타일시트가 정확하게 포함되었는지 확인해 보세요. - 박응용님, 2021년 3월 14일 12:44 오전 추천 , 대댓글
@운영자님, 정말 감사드립니다. 운영자님 말씀대로 스타일 시트 명이 잘못되어 있었습니다. 기존의 href="{% static 'style.css' %} 구문을 복사하여 simplemde.css 로 고치는 과정에서 min 이 누락되었습니다. 다음과 같이 수정하니 정상적으로 됩니다. <link rel="stylesheet" type="text/css" href="{% static 'simplemde.min.css' %}"> 저도 열심히 공부해서 운영자님처럼 실력을 키워 남을 돕고, 우리 사회의 집단 지성이 보다 커질 수 있도록 노력하겠습니다. 감사합니다. - sjbpsh님, 2021년 3월 14일 7:52 오전 추천 , 대댓글