Django xadmin rich text ueditor edit configuration and solve the problem of not displaying pictures

Download DjangoUeditor first:

  1. Install DjangoUeditor

This is to go to the official website to download and install, but it is not compatible with python3
pip install DjangoUeditor
Here you choose to download the source code for installation, consider compatibility, enter the compressed directory, and execute the following installation statement
python DjangoUeditor

  1. You can put the downloaded source code in the project
  2. Configure settings and add app
    # Rich text
  1. Configure url
url(r'^ueditor/',include('DjangoUeditor.urls' )),
  1. Model writing (mainly rich Text)
from DjangoUeditor.models import UEditorField
class UserAdvice(models.Model):
    advices = UEditorField(verbose_name='User suggestions', width=600, height=300, 
         filePath="advices/ueditor/%(datetime)s.%(extname)s", default='')

The parameters are as follows:

Width, height: the width and height of the editor, in pixels.
imagePath: path saved after image upload
filePath: the path saved after the attachment is uploaded. The setting rule is the same as that of imagePath

For more detailed parameters, see:

Migrating databases

  1. Add the ueditor plug-in in xadmin: create a new python file in the extra [apps / xadmin / plugins directory:
import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings
class XadminUEditorWidget(UEditorWidget):
    def __init__(self,**kwargs):
        self.Media.js = None
class UeditorPlugin(BaseAdminPlugin):
    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                return {'widget': XadminUEditorWidget(**param)}
        return attrs
    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")         #Own static directory
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")   #Own static directory
        nodes.append(js), UpdateAdminView), CreateAdminView)
  1. Add the ueeditor plug-in in the plugins directory under the file "init. Py". Otherwise, xadmin does not know the plug-in
  1. For setting, the fields set as rich text must be configured as follows
class UserAdviceAdmin(object):
    style_fields = {"advices":"ueditor"}
  1. Configure media static directory

If the following configuration is not performed, the picture will not be displayed

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Check the results after configuration

Foreground configuration: Auto escape off to clear styles

{% autoescape off %}
{{ advices }}
{% endautoescape %}

The results are as follows:

This section ends

Tags: github Python Django Javascript

Posted on Thu, 07 Nov 2019 16:10:04 -0500 by deRusett