TinyMCE в шаблоне Django

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

У меня есть форма, которая является modelForm. Он не добавляет никаких дополнительных полей («комментарий» и «утверждение» — единственные используемые поля, и они существуют в модели). В текстовом поле «комментарий» этой формы я хотел бы использовать 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',)

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

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


django templates tinymce django-tinymce
person Heyl1    schedule 07.09.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

Проблема заключалась в том, что `/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).

Это должно делать свое дело :).

person Heyl1    schedule 07.09.2010

arrow_upward
0
arrow_downward

После целого дня поисков и попыток я обнаружил, что гораздо проще использовать версию 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'),
]
person Julian Wise    schedule 20.12.2016