TinyMCE dans Django Modèle

En utilisant django-tinymce j'ai réussi à intégrer TinyMCE dans l'Admin avant. L'intégrer dans une forme frontale ne semble pas fonctionner pour moi cependant.TinyMCE dans Django Modèle

J'ai un formulaire qui est un modelForm. Il n'ajoute aucun champ supplémentaire ('commentaire' et 'instruction' sont les seuls champs utilisés et ils existent dans le modèle). Dans le champ textarea, 'comment', de cette forme je voudrais utiliser TinyMCE. Je l'ai essayé ce qui suit:

class EntryForm(forms.ModelForm): 
    comment = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}, mce_attrs=TINYMCE_USER_CONFIG)) 

    class Meta: 
     model = Entry 
     fields = ['statement','comment',]

class EntryForm(forms.ModelForm): 
    class Meta: 
     model = Entry 
     fields = ['statement','comment',] 

    def __init__(self, *args, **kwargs): 
     super(EntryForm, self).__init__(*args, **kwargs) 
     self.fields['comment'].widget = TinyMCE(attrs={'cols': 80, 'rows': 15}, mce_attrs=TINYMCE_USER_CONFIG,)

class EntryForm(forms.ModelForm): 

    class Meta: 
     model = Entry 
     fields = ['statement','comment',] 

    class Media: 
     js = ('/media/tinymce/jscripts/tiny_mce/tiny_mce.js', 
       '/sitemedia/js/tinymce_setup.js',)

Dans les HEAD balises html j'ai mis {{ form.media }} (la forme est appelée form dans les vues et modèle) . J'utilise aussi Grappelli et Filebrowser pour l'Admin.

Quelqu'un pourrait-il expliquer ce qui me manque ou le processus pour que cela fonctionne? Merci beaucoup!

Source

2010-09-07 Heyl1

Pour répondre à ma propre question: la dernière option fonctionne.

Le problème était que `/sitemdia/js/tinymce_setup.js 'était un fichier d'installation Grappelli. Cela ne devrait être utilisé que par l'administrateur. J'ai retiré que peu donc j'ai fini avec:

class Media: 
    js = ('/media/tinymce/jscripts/tiny_mce/tiny_mce.js', 
      '',)

Et dans l'en-tête, j'ai ajouté

<script type="text/javascript"> 
     tinyMCE.init({ 
       mode: "textareas", 
       theme: "simple" 
     }); 
</script>

Vous pouvez également au lieu de supprimer le fichier de configuration insérer un autre fichier qui fonctionne (avec par exemple la tinyMCE.init peu de code dedans).

Cela devrait faire l'affaire :).

Source

2010-09-07 15:34:35 Heyl1

Après une journée de recherche et d'essayer je l'ai trouvé beaucoup plus facile d'utiliser une version frontend de tinyMCE sur une application Django, offert par CDN

contenu de TinyMCE est enregistré avec les balises HTML et peuvent être affichées à l'utilisateur avec des balises html.

J'ai essayé de garder la solution aussi générique que possible, c'est-à-dire que le javascript devrait être déplacé et référencé. Si le frontend wysiwyg sera utilisé par plus de personnes que vous, vous devriez changer le safe dans l'index pour une fonction de nettoyage pour assurer la sécurité/empêcher les hacks de code non désirés. Etre un CDN frontal pour rendre TinyMCE ne nécessite pas d'installation backend, viewspy et urls.py sont inclus pour montrer à l'utilisateur une vue de ce qu'il a saisi.

Lien vers CDN https://www.tinymce.com/download/

Index.html

{% load staticfiles %} 
<!-- <link rel="stylesheet" type="text/css" href="{% static 'wys/style.css' %}" /> --> 
<!DOCTYPE html> 
<html> 
<head> 
    <!-- Load TinyMCE from CDN --> 
    <script src="//cdn.tinymce.com/4/tinymce.js"></script> 
<!-- Set preference of what should be visible on init --> 
<script>tinymce.init({ 
     selector: '#foo', 
     height: 200, 
     theme: 'modern', 
     plugins: [ 
     'advlist autolink lists link image charmap print preview hr anchor pagebreak', 
     'searchreplace wordcount visualblocks visualchars code fullscreen', 
     'insertdatetime media nonbreaking save table contextmenu directionality', 
     'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' 
     ], 
     toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
     toolbar2: 'print preview media | forecolor backcolor emoticons | codesample', 
     image_advtab: true, 
     templates: [ 
     { title: 'Test template 1', content: 'Test 1' }, 
     { title: 'Test template 2', content: 'Test 2' } 
     ], 
     content_css: [ 
     '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
     '//www.tinymce.com/css/codepen.min.css' 
     ] 
    }); 
    </script> 
    </head> 



    <body> 
    <h1>This is the homepage</h1> 

     <h1>Below Are 2 Form Areas</h1> 
    <form method="GET"> 
     Question: <input type="text" id="foo" name="search"><br/><br/><br/><br/><br/> 
     Name: <input type="text" id="bar" name="name"><br/><br/><br/><br/><br/><br/> 
     <input type="submit" value="Submit" /> 
    </form><br/><br/> 



    <h3>Display of question</h3> 
    {% for question in questions %} 
     <p>{{ question.query|safe}}</p> 
     <p>{{ question.user_id|safe}}</p> 
    {% endfor %} 

    </body>

vues.py

from django.shortcuts import render 
from .models import Queries 

def MainHomePage(request): 
    questions=None 
    if request.GET.get('search'): 
     search = request.GET.get('search') 
     questions = Queries.objects.filter(query__icontains=search) 

     name = request.GET.get('name') 
     query = Queries.objects.create(query=search, user_id=name) 
     query.save() 

    return render(request, 'wys/index.html',{ 
     'questions': questions, 
    })

urls.py dans l'App

from django.conf.urls import url 

from . import views 


app_name = 'wys' 
urlpatterns = [ 
    url(r'^', views.MainHomePage, name='index'), 
    # url(r'^', views.MainHomePage, name='index'), 
]

Source

2016-12-20 23:56:24

TinyMCE dans Django Modèle

Répondre

Questions connexes