Question

使用django-tinymce我之前在Admin中成功嵌入了TinyMCE。然而，将它嵌入前端形式对我来说似乎并不适用。

我有一个formForm的表单。它不会添加任何额外的字段（'comment'和'statement'是唯一使用的字段，它们存在于模型中）。在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作为管理员。

有人可以解释一下我缺少的东西或让它运作的过程吗？非常感谢！

Answer 1

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

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

应该这样做：）。

Answer 2

经过一整天的搜索和尝试后，我发现在Django App上使用tinyMCE的前端版本更容易，通过TinyMCE的CDN提供

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

Django模板中的TinyMCE

2 个答案: