有人听说过ToastUI Editor吗？很难找到有关它的资源。
在Django ModelForm中，我尝试使用ToastUI编辑器作为表单的内容字段。我已经通过JS实现了它，但我试图找到更pythonic和更简单的方法来实现它。
下面是我如何实现它的：
base.html
<!DOCTYPE html>
<html lang="en">
<head>
...
{# ToastUI #}
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</head>
<body>
...
{# ToastUI #}
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</body>
</html>create.html
{% extends 'base.html' %}
{% block content %}
<form id="journal-form" action="{% url 'notes:create' %}" method="post" enctype='multipart/form-data'>
{% csrf_token %}
{% with journal_form.title as title %}
<div class="form-group">
<label for="{{ title.id_for_label }}">{{ title.label }}</label>
<input type="{{ title.field.widget.input_type }}" class="form-control" id="" placeholder="{{ title.label }}" name="{{ title.name }}" />
</div>
{% endwith %}
{% with journal_form.content as content %}
<div class="form-group" style="display: none;">
<label for="{{ content.id_for_label }}">{{ content.label }}</label>
<textarea id="{{ content.id_for_label }}" class="form-control" placeholder="{{ content.label }}" name="{{ content.name }}"></textarea>
</div>
{% endwith %}
<div id="editor"></div>
<div>
{{ journal_image_form.as_p }}
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const editorDiv = document.getElementById('editor');
const editor = new toastui.Editor({
el: editorDiv,
height: '500px',
initialEditType: 'markdown',
previewStyle: 'vertical',
initialValue: editorDiv.value,
})
const journalForm = document.getElementById('journal-form')
journalForm.addEventListener('submit', (e) => {
e.preventDefault()
const journalFormTextArea = document.querySelector('textarea')
journalFormTextArea.textContent = editor.getMarkdown()
journalForm.submit()
});
});
</script>
</script>
{% endblock content %}如你所见，我使用了两个文本区域;一个用于表单，另一个用于UI。当表单被提交时，JS代码抓取ToastUI编辑器中所写的内容并将其提交给表单。
我还发现有一个软件包，叫做‘django-tuieditor’。安装好后，我修改了forms.py和models.py：
forms.py
...
from django_tuieditor.widgets import MarkdownEditorWidget
from django_tuieditor.fields import MarkdownFormField
class JournalForm(forms.ModelForm):
content = MarkdownFormField(
widget=MarkdownEditorWidget(),
)
class Meta:
model = Journal
fields = ('title', 'content')models.py
...
from django_tuieditor.models import MarkdownField
# Create your models here.
class Journal(models.Model):
title = models.CharField('title', max_length=255)
content = MarkdownField('content')
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)设置
INSTALLED_APPS = [
...
'django_tuieditor'
...
]这行不通。没有JS代码什么都不会改变。
与SimpleMDE相比，它允许更简单的JS代码。
...
{% with journal_form.content as content %}
<div class="form-group my-3">
<label for="{{ content.id_for_label }}">{{ content.label }}</label>
<textarea id="editor" class="form-control" placeholder="{{ content.label }}" name="{{ content.name }}"></textarea>
</div>
{% endwith %}
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const contentTextarea = document.querySelector('#editor');
const editor = new SimpleMDE({
element: contentTextarea,
autofocus: false,
})
})
</script>
...我怎样才能用更pythonic的方式或者至少用更简单的JS代码来实现这一点呢？django ModelForm/Form如何识别哪个输入进入哪个字段？
1条答案
按热度按时间m2xkgtsf1#
很多吐司的JS代码应该由django-tui模块处理，但是安装文档有点缺乏。
最明显的尝试是在模板页面的某个地方包含
{load static}-这是加载模块中包含的静态JS页面，使新的字段类型工作。这样，您就可以从<head>中删除link和script标记，并从body中删除eventListener标记。只使用{{form.as_div}}尝试一下，看看它是否有效，然后根据需要定制表单字段。