Django 模板中的 TinyMCE

发布于 2024-09-18 05:59:57 字数 1251 浏览 6 评论 0原文

使用 django-tinymce 我之前已经成功地将 TinyMCE 嵌入到管理中。然而，将其嵌入前端形式似乎对我不起作用。

我有一个模型表单。它不添加任何额外的字段（“comment”和“statement”是唯一使用的字段，它们存在于模型中）。在该表单的文本区域“评论”字段中，我想使用 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,)

在 HEAD html 标记中，

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

我放置了 {{ form.media }} （该表单称为 form在视图和模板中）。我还使用 Grappelli 和 Filebrowser 进行管理。

有人可以解释一下我缺少什么或让它发挥作用的过程吗？非常感谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手心的温暖 2024-09-25 05:59:57

回答我自己的问题：最后一个选项有效。

问题是“/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 位代码）。

这应该可以解决问题:)。

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 :).

回复收藏 0 原文

感情旳空白 2024-09-25 05:59:57

经过一整天的搜索和尝试，我发现在 Django 应用程序上使用tinyMCE 的前端版本要容易得多，通过 TinyMCE 的 CDN 交付

内容使用 HTML 标签保存，并且可以使用 html 标签显示给用户。

我试图让解决方案尽可能通用，即应该移动和引用 javascript。如果前端所见即所得的使用人数比您多，您应该将索引中的 |safe 更改为清理功能，以确保安全/防止不必要的代码黑客攻击。

作为渲染 TinyMCE 的前端 CDN 并不“需要”后端安装，其中包含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'),
]

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

回复收藏 0 原文