TinyMCE in Django Template

Question

Using django-tinymce I have successfully embedded TinyMCE in the Admin before. Embedding it in a front-end form does not seem to work for me however.

I have a form which is a modelForm. It doesn't add any extra fields ('comment' and 'statement' are the only fields used and they exist in the model). On the textarea field, 'comment', of that form I would like to use TinyMCE. I have tried the following:

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',]

and

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,)

and

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',)

In the HEAD html tags I have put {{ form.media }} (the form is called form in the views and template). I am also using Grappelli and Filebrowser for the Admin.

Could someone please explain what I'm missing or the process of getting this to work? Thanks very much!

score 5 · Accepted Answer · answered Sep 07 '10 at 15:34

To answer my own question:the last option works.

The problem was that `/sitemdia/js/tinymce_setup.js' was a Grappelli setup file. This should only be used by the Admin. I removed that bit so I ended up with:

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

And in the header I added

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

You can also instead of removing the setup file insert another file that does work (with for example the tinyMCE.init bit of code in it).

That should do the trick :).

score 0 · Answer 2 · answered Dec 20 '16 at 23:56

After a full day searching and trying I found it much easier to use a frontend version of tinyMCE on a Django App, delivered through TinyMCE's CDN

Content is saved with the HTML tags and can be displayed to the user with html tags.

I've tried to keep the solution as generic as possible, ie, the javascript should be moved and referenced. If the frontend wysiwyg will be used by more people than you, you should change the |safe in the index to a cleaning function to ensure security/prevent unwanted code hacks.

Being a frontend CDN to render TinyMCE doesn't 'require' backend installation, the viewspy and urls.py are included to show us providing the user with a view of what they enter.

Link to 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>

views.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 in the 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'),
]

TinyMCE in Django Template

2 Answers2