如何复制“contenteditable”元素的值并将其插入到其他html模板中？姜戈

Question

我试图复制'textarea‘输入(用户提供文本)的值，并在发布之前使用它在“草稿页面”中。

我不会在这里粘贴我所有的代码，但相关的东西。

首先，我使用Django框架，并将Jquery脚本添加到base.html模板中。

在另一个名为“userblog”的html模板中，我添加了一个迷你文本编辑器，其中他的一个元素是一个段落，您可以更改它的内容。

它的结尾部分：

  <div id="textBox" contenteditable="true" name="post_content"><p>Lorem ipsum</p></div>
  <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
  <p><input type="submit" value="Send" /></p>
  {% csrf_token %}

  </form>

  <script type="text/javascript">
    var textAreaContent = $('textBox').val();
  </script>

  </body>
  </html>
{% endblock %}

我在“draft.html”中写道：

{% extends "TheApp/base.html" %}
{% load static %}
{% block body_block %}
<div class="container">
 <h1>This is a preview of you're post:
  <script type="text/javascript" src="userblog.html">
   document.write(textAreaContent)
   </script>
 </h1>




{% endblock %}

意见如下：

def draft(request):
    if request.method == 'POST':
        draft = request.POST.get('post_content')
        return render(request, 'TheApp/draft.html', {'draft':draft})

    else:
        return render(request, 'TheApp/userblog.html',)

问题是它没有显示我的段落内容。我的代码有什么问题？

我是新手，我学到了一些python和Django框架。对于这个过程，我接触了一些HTML & CSS，但是我对JS几乎一无所知。

Answer 1

您的"userblog.html“实际上没有得到您期望的变量。

在你的视线中

return render(request, 'TheApp/draft.html', {'draft':draft})

您正在向模板发送一个名为“草稿”的上下文变量，可以在模板中访问该变量，如下所示

<h1>This is a preview of you're post:
  {{ draft }}
</h1>

如您所见，您的场景根本不需要任何javascript。

从技术上讲，您可以混合上下文变量和javascript (我认为)：

<h1>This is a preview of you're post:
  <script>
   document.write({{ draft }})
   </script>
</h1>

这在这里是没有意义的，但万一您的代码只是一个理解一些基本知识的示例。

编辑：

当然，您必须确保post_content实际上被发送到您的视图中。这意味着，在您的第一个模板，您需要一个文本区域或输入您的可编辑内容。我看到的唯一一件事就是一个有这个名字的<div>。<div>不发送任何东西。因此，您在"userblog.html“中的表单可以是这样的：

<form action='/draft/' method='POST'>
    {% csrf_token %}
    <textarea name="post_content">

    </textarea>
    <button type="submit">Save</button>
</form>

然后，在我的代码上面，您的draft.html将显示您输入的内容。