質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

735閲覧

Djangoでwysiwyg(quill)を使用する方法

am120sec

総合スコア14

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/26 13:27

編集2022/01/12 10:55

画像などがテキスト間に入ると、表示するときにテキスト、画像の順番になってしまい、
テキスト、画像、テキストのように表示できません。

wysiwygで作成した部分はHTMLタグを含めtextfieldに格納すればよいのでしょうか。
参考になるサイト等があれば教えてください。

2017/9/4 追記
現在作成中のコードを追加し、質問の内容を変更します。

  1. quill(リッチテキストエディタ)上でアップロードする画像をどのようにしてDjangoと連携すればよいか
  2. quillで作成するリッチテキストエディタのフィールドはtext = models.TextField()でよいか
  3. 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Quillのドキュメントをざっと眺めてみた限りでの意見ですので、大分当てずっぽうな回答ですが……。

Djangoとの連携方法

QuillのAPIに getContents というものがあるようなので、それを使ってDelta(JSON)形式でデータは取得できそうですね。

それをいったんDjangoで使っているストレージに上書きしてしまいます。

それを呼び出す際には、DeltaParserを作り、Pythonオブジェクト化するのが無難だと思います。

Python3であれば、JSONParserの拡張は比較的容易だと記憶しております。

参考

Quillで作成するリッチテキストエディタのフィールドの取得

作り方に拠りますでしょうか……。

すくなくとも、今回僕の考えた方法の場合だと、JavaScriptでフォーム内情報をDeltaで送り、Djangoでオブジェクト化するアプローチを考えていたので、ご質問の方法にならないと思われます。

HTMLでフォームのデータを取得し、表示する場合

QuillのAPIにsetContentsがありますね。これを使いましょう!

Quillに直接Deltaデータを突っ込んでやって、表示してもらうのがいいと思います。

参考

まとめ

私のやり方になってしまいましたが、Quillにいい感じのAPIがあるのでそれを利用する方針で行ける気がしてます。

もし追加するのであれば、画像アップローダーをDjango(Python)で作る必要があるなというところでしょうか。

P.S.

私の偏見ですが、私はQuillは全く、Djangoもほとんどわからないですが、自力でここまで調べてできたということは、am120secさんはだいぶん筋がよく、かなりいい調子に開発できてると思います。

どのようなWebサービスを構築するかは存じ上げられませんが、あともう少しだと思います。頑張ってください :)

投稿2017/09/12 06:14

manzyun

総合スコア2244

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

am120sec

2017/09/12 11:47

頂いたご意見を基に再度チャレンジしてみます。 温かいお言葉をいただくとは思いもしていませんでした。 初心の心が折れかけていたときでしたので大変励みになりました。 結果はどうであれまたご報告させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問