simplemde 에디터 적용 문의드립니다.

아래 게시판 보고 static 폴더에 simplemde.min.js, simplemde.min.css 파일 집어넣은다음

base.html에서 이렇게 붙여놓고

<head> 부분에
 <link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
    <!--  CSS -->

    <link rel="stylesheet" type="text/css" href="{% static 'simplemde.min.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

<body>부분에

<script src="{% static 'bootstrap.min.js' %}"></script>

<script src="{% static 'simplemde.min.js' %}"></script>

question_form.html에서

<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>
                    var simplemde = new SimpleMDE({element: document.getElementById("content")});
                </script>
            </div>

이렇게 붙였는데, 질문등록 텍스트 상자가 그대로네요. 어떻게 해야 할까요?

그리고 simplemde 관련 게시판 댓글 중 관리자님께서 "simplemde.min.js 속에 있는 함수를 사용하려면 먼저 로딩되어 있어야 합니다. 제이쿼리도 마찬가지입니다. " 라고 답을 달아주셨는데. 이게 무슨뜻인지 모르겠습니다.ㅠㅠ

hello_world 님 758

M 2021년 12월 2일 5:39 오후

댓 글 (0) |

목록으로

1개의 답변이 있습니다. 1 / 1 Page

아. "base.html" 파일에서 이렇게 하니깐 해결되었습니다.

<script src="{% static 'simplemde.min.js' %}"></script>
    <script>
        var simplemde = new SimpleMDE({element: document.getElementById("content")});
    </script>

hello_world 님

2021년 12월 2일 6:01 오후

댓 글 |

네, 잘하셨네요, 하지만 base.html 에 넣으면 base.html을 상속하는 모든 화면이 위 스크립가 적용됩니다. 필요한 템플릿만 {% block script %} {% endblock %} 구문안에 위 스크립트를 적용하는 것이 더 좋을 것 같아요. -

박응용님, 2021년 12월 2일 6:28 오후 , 대댓글

@박응용님 네. 제가 초보라서 말씀하신 "필요한 템플릿만 {% block script %} 구문안에 위 스크립트를 적용하는 것이 더 좋을 것 같아요."의 의미를 잘 이해 못하고 있네요. 말씀하신 내용이 question_form.html에서 아래 코드처럼 작성하라는 뜻인지요? 이렇게 하니깐 관리자님께서 말씀하신대로 질문 등록할때만 simplemde가 활성화되네요. <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> {% block script %} <script> var simplemde = new SimpleMDE({element: document.getElementById("content")}); </script> {% endblock %} </div> - hello_world님, M 2021년 12월 2일 6:39 오후 , 대댓글

@hello_world님 다음 문서를 참고해 보세요. https://wikidocs.net/71445#_8 -

박응용님, 2021년 12월 2일 9:59 오후 , 대댓글

@박응용님 넵. 선생님. 감사합니다. - hello_world님, 2021년 12월 2일 11:41 오후 , 대댓글