Шаблон TinyMCE в Джанго - PullRequest
Новая
       6

Шаблон TinyMCE в Джанго

4 голосов
/ 07 сентября 2010

Используя django-tinymce, я успешно внедрил TinyMCE в Admin ранее.Однако мне кажется, что встраивание его в интерфейсную форму мне не подходит.

У меня есть форма, которая является modelForm.Он не добавляет никаких дополнительных полей («комментарии» и «оператор» являются единственными используемыми полями, и они существуют в модели).В поле textarea, «комментарий», я хотел бы использовать TinyMCE.Я пробовал следующее: 

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

В тегах HEAD html я поставил {{ form.media }} (форма называется form в представлениях и шаблонах).Я также использую Grappelli и Filebrowser для администратора.

Может кто-нибудь объяснить, что мне не хватает или как заставить это работать?Большое спасибо!

Ответы [ 2 ]

5 голосов
/ 07 сентября 2010

Чтобы ответить на мой собственный вопрос: последний вариант работает.

Проблема заключалась в том, что `/sitemdia/js/tinymce_setup.js 'был установочным файлом Grappelli. Это должно использоваться только администратором. Я удалил этот бит, поэтому я получил: 

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

И в шапке я добавил 

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

Вы также можете вместо удаления файла установки вставить еще один работающий файл (например, с небольшим количеством кода tinyMCE.init).

Это должно сработать :).

0 голосов
/ 21 декабря 2016

После целого дня поисков и попыток я обнаружил, что намного проще использовать внешнюю версию tinyMCE в приложении Django, поставляемую через CDN

TinyMCE *.

Содержимое сохраняется с тегами HTML и может отображаться пользователю с тегами HTML.

Я пытался сделать решение как можно более универсальным, то есть javascript должен быть перемещен и на него есть ссылки. Если внешний интерфейс wysiwyg будет использоваться большим количеством людей, чем вы, вы должны изменить | safe в индексе на функцию очистки, чтобы обеспечить безопасность / предотвратить нежелательные взломы кода.

Будучи интерфейсом CDN для рендеринга TinyMCE не требует «бэкэнд-установки», viewspy и urls.py включены, чтобы показать нам, как предоставить пользователю представление о том, что они вводят.

Ссылка на 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 в приложении 

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