django - 如何以类似于管理员的方式在我的 View 中使用 django-markdownx？

Question

我一直在使用 django-markdownx 自动更新页面并提交更改。

我关注了this question and answer并设法让 django-markdownx 在管理员和我的 View 中工作。但是在我看来，编辑文本区域不会自动更新页面。

带有 django-markdownx 的管理页面正是我想要的，更新文本区域会更新页面，但不会更新底层数据库字段，直到您点击保存。

然后我尝试将管理代码撕成我自己的 View 。

在我的 View /模板中，我有一个类似于管理表单的文本区域。我还包含了“/static/markdownx/js/markdownx.js”并将我的表单设置为与管理页面大部分相似:

<form method="POST" action="">{% csrf_token %}
<div class="markdownx">
    <textarea name="myfield" rows="10" cols="40" required="" data-markdownx-upload-urls-path="/markdownx/upload/" data-markdownx-editor-resizable="" class="markdownx-editor" id="id_myfield" data-markdownx-urls-path="/markdownx/markdownify/" data-markdownx-latency="500" data-markdownx-init="" style="transition: opacity 1s ease;">
        {{ note.myfield }}
    </textarea>
</div>
<div class="markdownx-preview">
    {{ note.formatted_markdown|safe }}
</div>
</form>

这没有用。

当您在管理员中编辑时，我定期看到/markdownx/markdownify/的请求，但我的没有。我不确定我是应该做同样的事情，还是只是做一些定时的 javascript 页面刷新，并将表单中的所有数据传递回我的 View ，然后再次重新呈现页面。

我不太了解 django-markdownx 文档。

更新:

文档 seems to suggest对 MarkdownX() 的调用应该进行初始化。

<script src="/static/markdownx/js/markdownx.js"></script> 
...
<script type="text/javascript">
let parent = document.getElementsByClassName('markdownx');
let md = new MarkdownX( element, element.querySelector('.markdownx-editor'), element.querySelector('.markdownx-preview'));
</script>

但是当我尝试这个时，我明白了。

Uncaught ReferenceError: MarkdownX is not defined

此外，我在管理页面中没有看到任何类似这样的初始化。

有没有在自己的 View 中使用django-markdownx的例子类似于在admin中的用法？

谢谢

磅

Answer 1

以下是一个错误的解决方案。

正确的方法是使用 MarkdownX 的内置 Javascript，但我还不能让它工作。所以，我写了我自己的。它可能对其他人有用。

在模板 html 中，包含 js.cookie.min.js 以获得 django csrftoken。然后是一个回调函数，当对文本区域进行更改时将调用该回调函数。然后，我们使用从 MarkdownX 的 markdownify 调用返回的 HTML 代码更新预览 div。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
...
<script type="text/javascript"> 
function myMDFunc( elem ) {
  input = elem.value;
  var csrftoken = Cookies.get('csrftoken');
  $.ajax(
    {
      type: "POST",
      url: "/markdownx/markdownify/",
      data: { CSRF: csrftoken, csrfmiddlewaretoken: csrftoken, content: input}
    })
    .done(function(data, status){
      document.getElementById("markdownx-preview").innerHTML = data;
    });
} 
</script>

还是在模板html中，在form中，同时为onchange和onkeyup调用这个函数。

<form method="POST" action=""> {% csrf_token %}
    {{ note.title }}
  <div class="markdownx">
    <textarea onchange="myMDFunc(this)" onkeyup="myMDFunc(this)" cols="60" rows="5" name="text" >
      {{ note.myfield }}
    </textarea>
  </div>
  <div class="markdownx-preview" id="markdownx-preview">
    {{ note.formatted_markdown|safe }}
  </div>
  <input type="submit" id="submit" name="submit">
</form>

总而言之，对文本区域的更改意味着我们调用“onchange”或“onkeyup”，它们会调用 myMDFunc。然后 myMDFunc 使用原始 MarkDown 代码的数据进行 ajax 调用，对该调用的响应是漂亮的 HTML 数据。 myMDFunc 中的回调使用漂亮的 HTML 更新预览。

有点效果。我确信真正的 MarkdownX 代码将处理图像的拖放和调整 ajax 调用的节奏以对服务器很好。