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

Question

我无法使用 django-markdownx 自动更新页面并提交更改。

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

带有 django-markdownx 的管理页面正是我想要的，更新 textarea 会更新页面，但在你点击保存之前不会更新底层数据库字段。

然后我尝试将管理代码撕掉到我自己的视图中。

在我的视图/模板中，我有一个表单，textarea 类似于管理员表单。我还包括“/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 页面刷新，并将表单中的所有数据传递回我的视图，然后再次重新渲染页面。

我无法完全理解 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

我也没有在管理页面中看到任何这样的初始化。

是否有在你自己的视图中使用 django-markdownx 的示例，类似于在 admin 中的用法？

谢谢

磅数

Answer 1

以下是一个损坏的解决方案。

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

在模板 html 中，包含 js.cookie.min.js 以获取 django csrftoken。然后是一个回调函数，当对 textarea 进行更改时将调用该回调函数。然后，我们使用从 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中，在表单中，对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>

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

它有点工作。我确信真正的 MarkdownX 代码将处理图像的拖放和调整 ajax 调用的速度，以便对服务器友好。