Question

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

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

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

所以我接着试图将管理代码撕掉我自己的观点。

在我的视图/模板中，我有一个表单，textarea类似于admin一个。我还包括“/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>

这不起作用。

我定期看到在admin中编辑时有/ markdownx / markdownify /的请求，但不是我的。我不确定我是否应该做同样的事情，或者只是做一些定时的javascript页面刷新，并将我表单中的所有数据传回我的视图，然后再重新渲染页面。

我无法理解django-markdownx文档。

更新：

调用MarkdownX（）的文档seems to suggest应该进行初始化。

<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的示例，类似于管理员中的用法？

由于

LB

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调用对服务器的好处。

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

1 个答案: