Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

django tinymce not showing rich textarea

My settings:

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

and my form:

class AnswerCreationForm(forms.ModelForm):

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

and in my view I have did this:

<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>

but its not displaying the rich text just displaying the normal text editor.

I have even tried:

<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>

but also it doesnt show rich text editor?? How can I display it?? What am I doing wrong ??

like image 974
gamer Avatar asked Nov 28 '14 13:11

gamer


People also ask

How to integrate TinyMCE in Django?

Note – you can also use Tinymce CDN to integrate tinymce in your django app. Now copy your downloaded Tinymce files and paste them in your project’s static folder. like static/js/tinymce Now go to Tinymce demo page and choose desired text editor of your choice. You can choose a paid version also, if you need more functionalities.

How to integrate rich text editor in your Django application?

Edit your models.py file accordingly and introduce an HTMLField () for Rich Text Editor:] from django.db import models from tinymce.models import HTMLField class MyModel (models.Model): ... content = HTMLField () This will integrate a simple Rich Text Editor in your django application.

How to use TinyMCE to create custom text editor?

Now go to Tinymce demo page and choose desired text editor of your choice. You can choose a paid version also, if you need more functionalities. Copy the content of JS file from editor. Make a new file custom.js in static/js/tinymce folder and paste the copied content in it and save it.

What is Django-TinyMCE?

What is django-tinymce? django-tinymce is a Django application that contains a widget to render a form field as a TinyMCE editor. Use as a form widget or with a view.


1 Answers

This answer is kind of skirting the issue, but hopefully it helps you. It is the solution that I found for my projects.

I have troubles with django-tinymce as well, and I ended up not being able to solve the problem but found the solution using straight tinymce instead of the django-tinymce app. Here is the question that I asked: django-tinymce modern theme

All you have to do is include this javascript on a page and it replaces the textareas with the RTE. Hopefully this works for what you need.

<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>
like image 110
awwester Avatar answered Sep 28 '22 06:09

awwester