Django uses xadmin integrated rich text editor Ueditor (Method II)

A, xadmin installation and configuration
1, the installation xadmin, wherein the first mounting python3 unsuccessful, the second or third recommended

1  Mode 1: the install xadmin PIP
 2 Second way: the install PIP + Git Git: //github.com/sshwsfc/ xadmin.git
 . 3 Three ways: Download https://codeload.github.com/sshwsfc/xadmin/zip/ Master Zip file, unzip and enter the directory
 4 direct python setup.py install

2, registered on the inside settings.py

1 INSTALLED_APPS = (
2     #........
3     'xadmin',
4     'crispy_forms',
5 )

3, modify urls.py

import xadmin
urlpatterns = [
    #url(r'^admin/', admin.site.urls),
    url(r'^xadmin/', xadmin.site.urls),
]


4, a new application under adminx.py

Import xadmin 
xadmin.site.register (Level) # your application name

5, start django

python manage.py makemigrations
python manage.py migrate
python manage.py runserver 8000

If successful you can visit
6, visit

http: // your ip: 8000 / xadmin /

 

Two, DjangoUeditor installation and configuration
1, the installation DjangoUeditor, python2 python3 and to make it clear.

Method 1: Download https://github.com/twz915/DjangoUeditor3/ source package at the command line run: python setup.py install 
Method Two: Use the command line tool pip run (recommended): pip install DjangoUeditor

2, which increases the INSTALL_APPS follows:

INSTALLED_APPS = (
    #........
    'DjangoUeditor',
)

3, other configurations of the setting.py

. 1 UEDITOR_SETTINGS = {
 2      " Toolbars " : { # button to define a plurality of toolbar displays, allowing the definition of a plurality of rows 
. 3          " NAME1 " : [[ ' Source ' , ' | ' , ' Bold ' , ' Italic ' , ' underline ' ]],
 . 4          " NAME2 " : []
 . 5      },
 . 6      " images_upload " : {
 . 7          "allow_type": " JPG, PNG " , # definition allows uploaded picture type 
. 8          " MAX_SIZE " : " 2222kb "  # definition allows image size uploaded 0 means unlimited 
. 9      },
 10      " files_upload " : {
 . 11          " allow_type " : " ZIP , RAR " , # definition allows upload file type 
12 is          " MAX_SIZE " : " 2222kb "  # definition allows upload file size, 0 to not limit 
13      },
 14      "image_manager": {
 15          " LOCATION " : ""  # position image manager, if not specified, the default path to upload images with the same 
16      },
 . 17  }
 18 is MEDIA_URL = ' / Upload / ' 
. 19 of MEDIA_ROOT it the os.path.join = (base_dir, ' the Upload / ' ) # this is the prefix url to access the uploaded file in the browser        

Description:
UEditorField inherited from models.TextField, so you can directly models.TextField model which can be defined directly into UEditorField.
UEditorField provides additional parameters:
Toolbars: Configuration toolbar you want to show, a string of mini, normal, full, besttome, on behalf of small, generally all, a style painted Weizhong contributions. If the default toolbar does not meet your requirements, you can configure your display settings button inside. For instructions, see below.
imagePath: image upload path, such as "images /", to upload the "{{MEDIA_ROOT}} / images " folder
filePath: Annex uploaded path, such as "files /", to upload the "{{MEDIA_ROOT}} / files "folder
scrawlPath: graffiti file upload path, such as" scrawls / ", to upload the" {{MEDIA_ROOT}} / scrawls " folder if not specified default = ImagePath
imageManagerPath: path picture manager displays, such as "imglib /", to upload the "{{MEDIA_ROOT}} / imglib ", if not specified the default = imagepath.
options: UEditor other parameters, Dictionary type. See the description of the document ueditor_config.js Ueditor inside.
css: CSS style editor textarea
width, height: editor's width and height in pixels.

3, configure url

from django.conf.urls.static import static
from django.conf import settings
url(r'^ueditor/', include('DjangoUeditor.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4, configuration adminx.py

from webedit.models import *
class LevelAdmin(object):
    style_fields = {"content": "ueditor"}
xadmin.site.register(Level,LevelAdmin)

5, the configuration xadmin
new ueditor.py at xadmin / plugins

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.ueditor_options=kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)

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 = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                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") # 自己的静态目录
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.js") # 自己的静态目录
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
在xadmin/plugins/__init__.py add ueditor
 ' ueditor '                

6, add ueditor item in the models

from DjangoUeditor.models import UEditorField
    content = UEditorField(verbose_name = '内容', height=500,width=1000,default=u'',imagePath="Article_img/%%Y/%%m/",toolbars='full',filePath='%%Y/%%m/',upload_settings={"imageMaxSize": 1204000},settings={}, command=None,)    

Copy the static files in djangoueditor to static, you can start the next application use


7, page rich text (close to Django's auto-escaping normal display)

{% autoescape off %}
{{ item.content }}
{% endautoescape %}

 

Original link: https: //blog.csdn.net/bbwangj/article/details/80883931

Guess you like

Origin www.cnblogs.com/zmdComeOn/p/11345418.html