Django富文本编辑器tinymce无法显示文本框

Question

Django富文本编辑器tinymce无法显示文本框

6

我的设置：

MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
TINYMCE_JS_URL = os.path.join(MEDIA_ROOT, "js/tiny_mce/tiny_mce.js")
TINYMCE_JS_ROOT = os.path.join(MEDIA_ROOT, "js/tiny_mce")
TINYMCE_DEFAULT_CONFIG = {
    'plugins': "table,spellchecker,paste,searchreplace",
    'theme': "advanced",
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 10,
}
TINYMCE_SPELLCHECKER = True
TINYMCE_COMPRESSOR = True

我的表单：

class AnswerCreationForm(forms.ModelForm):

ans_body = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
class Meta:
    model = Answer 
    fields = ('ans_body',)

在我看来，我已经做到了这一点：

<head>
    {{answer_form.media}}
</head>
<form action="{% url "answer-submit" question.id %}" method="get">{% csrf_token %}
{{answer_form.as_p}}
<input type="submit" value="Answer">
</form>

但它没有显示富文本，只显示普通的文本编辑器。

我甚至尝试了：

<head>
<script type="text/javascript" src="/static/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinymce.init({
    theme: "advanced",
    width: 300,
    height: 300,
    plugins: [
     "advlist autolink link image lists charmap print preview hr anchor pagebreak      spellchecker",
     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
     "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
  }); 
 </script>

 </head>
<form action="{% url "answer-submit" question.id %}" method="get">{% csrf_token %}
{{answer_form.as_p}}
<input type="submit" value="Answer">
</form>

但是它也没有显示富文本编辑器？我该如何展示它？我做错了什么吗？

- gamer

请检查您是否已完成所有步骤，参见http://django-tinymce.readthedocs.org/en/latest/installation.html。 - madzohan

我已经按照每个步骤正确地操作并运行了测试。测试显示富文本。 - gamer

2个回答

1

我知道你已经解决了你的问题，但是当我在寻找答案来解决我的问题时，即前端没有显示我想要的内容时，我回复你：

你只需要在前端进行筛选，所以在你的模板文件中添加以下内容：

{{ your_view_context.your_model_field | safe }}

- bghad1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- awwester · Accepted Answer

这个答案有点绕，但希望能对您有所帮助。这是我在项目中找到的解决方案。

我也遇到了django-tinymce的问题，最后无法解决，但发现使用直接的tinymce而不是django-tinymce应用程序可以解决问题。这是我的问题：django-tinymce modern theme 您只需要在页面上包含此javascript代码，它将用RTE替换文本区域。希望这对您有所帮助。

<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea',
    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"
    ],
});</script>