2010-09-07 2 views
4

Использование django-tinymce Я успешно вложил TinyMCE в Администратор раньше. Вложение его в интерфейсной форме, похоже, не работает для меня.TinyMCE в шаблоне Django

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

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

ответ

4

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

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

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

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

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

Будучи интерфейсом CDN для рендеринга, TinyMCE не требует установки на бэкэнд, viewpes и 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> 

просмотров.ру

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 в 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'), 
] 
Смежные вопросы