¿Conoces el editor de texto enriquecido? Visite medium.com, espero que se sienta inspirado por este hermoso editor de texto. Quiero integrar este tipo de editor en mi blog de django donde los usuarios pueden escribir sus artículos. ¿Cómo puedo integrarlo? Uso el editor TinyMce en este momento, pero no ha sido una mejor experiencia. Recuerde que una cosa también me dice que, si un usuario sube imágenes, ¿dónde se guardarán las imágenes?
Mi código TinyMce
<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>use summer note es un editor de texto VIP, también tiene la opción de cargar imágenes, la imagen se guardará en la columna DB como formato binario blob. solo incluye un enlace js y un enlace CSS. luego inicialice el objeto.
Enlace CSS
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">enlaces js
<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> El área de texto utilizada como selector se aplicará a todos los elementos del área de texto. si lo desea, simplemente aplíquelo en áreas de texto específicas. simplemente cambie el selector de $('textarea').summernote(); a $('.className').summernote();
<script> $(document).ready(function() { $('textarea').summernote(); }); </script>pip / pipenv install django-tinymceagregue 'tinymce' a sus aplicaciones instaladas.
INSTALLED_APPS = [ ... 'tinymce', ... ] En el archivo de modelos de su blog/artículo, agregue from tinymce.models import HTMLField Luego, para el contenido de su artículo, use HTMLField(),
por ejemplo content = HTMLField()
Puede habilitar el widget TinyMCE dentro de CreateView, por ejemplo.
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 En su página de plantilla/html/crear artículo, asegúrese de tener {{ form.media }} en la sección principal, esto insertará el javascript necesario para usted, luego se mostrará el editor TinyMCE para su campo de contenido.
Configura TinyMCE en la configuración del proyecto...
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'}] }Puedes probar CK Editor . TinyMCE requiere membresía, mientras que con CK Editor no necesita membresía y es muy útil para aplicaciones web relacionadas con blogs.
Los pasos de integración requieren que se realicen las siguientes tareas:
en configuración.py:
INSTALLED_APPS = [ ... 'ckeditor', ] en models.py: importe RichTextField y asigne el tipo de campo a su campo requerido
from ckeditor.fields import RichTextField class Report(models.Model): report_details = RichTextField(null=True,blank=True)en formularios.py: importar
from ckeditor.fields import RichTextFormField class SomeForm(forms.ModelForm): class Meta: widgets = { 'report_details': RichTextFormField(), }en las plantillas: agregue los siguientes javascripts -
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>