画像などがテキスト間に入ると、表示するときにテキスト、画像の順番になってしまい、
テキスト、画像、テキストのように表示できません。
wysiwygで作成した部分はHTMLタグを含めtextfieldに格納すればよいのでしょうか。
参考になるサイト等があれば教えてください。
2017/9/4 追記
現在作成中のコードを追加し、質問の内容を変更します。
- quill(リッチテキストエディタ)上でアップロードする画像をどのようにしてDjangoと連携すればよいか
- quillで作成するリッチテキストエディタのフィールドはtext = models.TextField()でよいか
- HTMLでフォームのデータを取得し、表示する場合、{{post.quill}}のようにして、リッチテキストフィールドを呼び出せるか
現在はDjangoで作成した、ただのテキストフォーム、画像の保存、表示は可能な状態ですが
以上の質問内容の段階で手間取っている状況となります。
ご教授のほどよろしくお願い致します。
HTML
1<!--index.html --> 2 3{% load staticfiles %} 4<!DOCTYPE html> 5<html lang="ja"> 6<html> 7<head> 8 <meta charset=utf-8 /> 9 <link rel="stylesheet" href="{% static 'css/jquery-ui-1.12.1.css' %}"> 10 <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.1/quill.snow.css"/> 11</head> 12<body> 13<form action= "{% url 'app:index' %}" method="POST" class="post-form" enctype="multipart/form-data">{% csrf_token %} 14 <p>{{ form1.toukou }}</p> 15 <p>{{ form1.tensuu }}</p> 16 <div id="standalone-container"> 17 <div id="toolbar-container"> 18 <span class="ql-formats"> 19 <button class="ql-header" value="2"></button> 20 <button class="ql-blockquote"></button> 21 </span> 22 <span class="ql-formats"> 23 <button class="ql-link"></button> 24 <button class="ql-image"></button> 25 <button class="ql-video"></button> 26 </span> 27 </div> 28 <div id="editor-container"></div> 29 </div> 30 31 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script> 32 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> 33 <script type="text/javascript" src="https://cdn.quilljs.com/1.3.1/quill.min.js"></script> 34 <script type="text/javascript"> 35 var quill = new Quill('#editor-container', { 36 modules: { 37 formula: true, 38 syntax: true, 39 toolbar: '#toolbar-container' 40 }, 41 placeholder: 'ここに入力', 42 theme: 'snow' 43 }); 44 </script> 45 46 <p><button type="submit" class="save btn btn-default">Save</button></p> 47</form> 48</body>
Django
1# model.py 2 3from django.db import models 4from django.utils import timezone 5 6TENSUU_CHOICES = [(i,str(i)) for i in range(1, 11)] 7class Action(models.Model): 8 #target = models.ForeignKey('Title_Post') 9 text = models.TextField() 10 author = models.ForeignKey('auth.User') 11 tensuu = models.DecimalField(max_digits=2,decimal_places=0,choices=TENSUU_CHOICES) 12 thumnail = models.ImageField(upload_to='static/images/', null=True, blank=True) 13 published_date = models.DateTimeField(blank=True, null=True) 14 def publish(self): 15 self.published_date = timezone.now() 16 self.save() 17 def __str__(self): 18 return self.text
Django
1# view.py 2 3from django.shortcuts import render,redirect,render, get_object_or_404 4from django.contrib.auth.decorators import login_required 5from django.views.decorators.http import require_POST 6from django.utils import timezone 7from .models import Action 8from .forms import Action_Form 9from django.http import HttpResponse 10from django.http import JsonResponse 11from django.core import serializers 12import json 13 14def index(request): 15 posts = Action.objects.filter(published_date__lte=timezone.now()).order_by('-published_date') 16 if request.method == "POST": 17 f = Action_Form(request.POST,request.FILES) 18 if f.is_valid(): 19 post = f.save(commit=False) 20 post.author = request.user 21 post.published_date = timezone.now() 22 post.save() 23 return redirect('app:index') 24 else: 25 f = Action_Form() 26 return render(request, 'app/index.html', {'posts': posts,'form1':f}) 27
Django
1# form.py 2 3from django import forms 4from .models import Action,Title_Post,Status 5 6class Action_Form(forms.ModelForm): 7 thumnail = forms.FileField(label='Select a image.',required=False, ) 8 class Meta: 9 model = Action 10 fields = ('tensuu','text','thumnail',) 11 12 13
