Integrate the text editor in django blog site

Question

Do you know about RichText Editor? Please visit medium.com, I hope you will be inspired by this most beautiful text editor, I want to integrate this type of editor in my django blog where users can write their articles, how can I integrate it? I use TinyMce editor right now but it has not been a better experience.. Remember one thing also tells me that, if a user will upload images where the images will save?

My TinyMce Code

<script
  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"
  referrerpolicy="origin"
></script>
<script>
  tinymce.init({
    selector: "textarea#mytextarea",
    /* plugins are the things which i can use in toolbar, menubar etc */
        plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'table emoticons template paste help imagetools'
    ],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullpage | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'},
    },
    menubar: 'favs file edit view insert format tools table help',
)}
</script>

Answer 1

pip / pipenv install django-tinymce

add 'tinymce' to your installed apps.

    INSTALLED_APPS = [
        ...
        'tinymce',
        ...
    ]

In your blog/article models file add from tinymce.models import HTMLField Then for your content of your article use the HTMLField(),

eg content = HTMLField()

You can enable the TinyMCE widget inside a CreateView for example..

  def get_form(self, form_class=None):
        form = super(CreateArticleView, self).get_form(form_class)
        form.fields['content'] = forms.CharField(
            widget=TinyMCEWidget(attrs={'rows': 20}))
        form.fields['content'].required = False
        return form

In your template/html/create-article page ensure you have {{ form.media }} in the head section, this will insert the necessary javascript for you, the TinyMCE editor will be then be displayed for your content field.

You configure TinyMCE in the project settings...

TINYMCE_DEFAULT_CONFIG = {
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 20,
    'selector': 'textarea',
    'theme': 'silver',
    'plugins': '''
            textcolor save link image media preview codesample contextmenu
            table code lists fullscreen insertdatetime nonbreaking
            contextmenu directionality searchreplace wordcount visualblocks
            visualchars code fullscreen autolink lists charmap print  hr
            anchor pagebreak
            ''',
    'toolbar1': '''
            fullscreen preview bold italic underline | fontsizeselect | forecolor backcolor | alignleft alignright |
            aligncenter alignjustify | indent outdent | bullist numlist table |
            | link image media | codesample |
            ''',
    'toolbar2': '''
            visualblocks visualchars |
            charmap hr pagebreak nonbreaking anchor |  code |
            ''',
    'contextmenu': 'formats | link image',
    'menubar': True,
    'statusbar': True,

    'file_picker_types': 'image media',

    # Without this, the local image upload tab will not show
    # imgage_upload_handler is a javascript function to handle the upload
    'images_upload_handler': "image_upload_handler",

    # Ensure uploaded images are responsive
    'image_dimensions': False, 'image_class_list': [{'title': 'Responsive', 'value': 'img-fluid'}]
}

Answer 2

You can try CK Editor. TinyMCE requires membership while with CK Editor you do not need any membership and it is quite handy for blog related webapps.

Integration steps take following tasks to be done -

at settings.py:

INSTALLED_APPS = [
    ...
    'ckeditor',
]

at models.py: import RichTextField and assign the field type to your required field

from ckeditor.fields import RichTextField
class Report(models.Model):
    report_details = RichTextField(null=True,blank=True)

at forms.py: import

from ckeditor.fields import RichTextFormField
class SomeForm(forms.ModelForm):
    class Meta:
        widgets = {
            'report_details': RichTextFormField(),
        }

at templates: add following javascripts -

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

Answer 3

use summer note is VIP text editor it has also images upload option, the image will save to DB column as blob binary format. just include a js link and a CSS link. then initialize the object.

CSS Link

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

js links

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

used textarea as selector will apply on all texarea elements. if you want just apply on specific textareas. just change the selector from $('textarea').summernote(); to $('.className').summernote();

<script>
$(document).ready(function() {
    
  $('textarea').summernote();

});
</script>