Shulou(Shulou.com)06/02 Report--

This article will explain in detail how django xadmin integrates the rich text editor of DjangoUeditor. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Introduction

Ueditor HTML editor is Baidu's open source online HTML editor, which is very powerful.

Extra function

Solve the problem that pictures and videos cannot be uploaded and displayed.

Ueditor download address https://github.com/wsqy/DjangoUeditor.git

After unpacking, copy the DjangoUeditor folder to the django project directory at the same level as the app directory

Modify app models

Import UEditorField Modul

Add fields that require rich text boxes

From DjangoUeditor.models import UEditorFieldclass Post (models.Model): "" article "" STATUS_CHOICES = ('draft',' draft'), ('published',' has been released'),). Body = UEditorField ('content', height=300, width=800,max_length=1024000000000, default=u'', blank=True, imagePath= "images/", toolbars='besttome', filePath='files/').

Description:

UEditorField inherits from models.TextField, so you can directly change the models.TextField defined in model to UEditorField.

UEditorField provides additional parameters:

Toolbars: configure the toolbar you want to display. The value is mini,normal,full,besttome, which represents a small, general, all, a style contributed by Tu Weizhong. If the default toolbar does not meet your requirements, you can configure your own display button in settings. See the introduction below.

ImagePath: the path to upload images, such as "images/", to the "{{MEDIA_ROOT}} / images" folder.

FilePath: the path to upload attachments, such as "files/", to the "{{MEDIA_ROOT}} / files" folder.

ScrawlPath: the path for uploading graffiti files, such as "scrawls/", which is uploaded to the "{{MEDIA_ROOT}} / scrawls" folder. If it is not specified, it defaults to imagepath.

ImageManagerPath: the path displayed by the picture manager, such as "imglib/", is uploaded to "{{MEDIA_ROOT}} / imglib". If not specified, it defaults to = imagepath.

Options: other UEditor parameters, dictionary type. See the instructions in Ueditor's documentation ueditor_config.js.

Css: the CSS style of editor textarea

Width,height: the width and height of the editor, in pixels.

Initialize the database

Makemigrationsmigrate modifies the settings file

Add file upload path configuration

MEDIA_URL='/upload/'MEDIA_ROOT = os.path.join (BASE_DIR, 'upload/') # this is the prefix of the url that accesses the uploaded file on the browser to modify the configuration of the xadmin (which can be ignored if you use admin)

Create a new ueditor.py script under the xadmin\ plugins\ path under the project, as follows

Import xadminfrom xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminViewfrom DjangoUeditor.models import UEditorFieldfrom DjangoUeditor.widgets import UEditorWidgetfrom django.conf import settingsclass 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 =''% (settings.STATIC_URL + "ueditor/ueditor.config.js") # own static directory js + =''% (settings.STATIC_URL + "ueditor/ueditor.all.js") # own static directory nodes.append (js) xadmin.site.register_plugin (UeditorPlugin, UpdateAdminView) xadmin.site.register_plugin (UeditorPlugin, CreateAdminView)

Add ueditor to the PLUGINS entry under the init.py file under the xadmin\ plugins\ path, and add the following last behavior to the

E:\ items\ blog_project\ xadmin\ plugins\ _ _ init__.pyPLUGINS = ('actions',' filters', 'bookmark',' export', 'layout',' refresh', 'details',' editable', 'relate',' chart', 'ajax',' relfield', 'inline',' topnav', 'portal',' quickform' 'wizard',' images', 'auth',' multiselect', 'themes',' aggregation', 'mobile',' passwords', 'sitemenu',' language', 'quickfilter',' sortablelist', 'importexport',' ueditor',) change DjangoUeditor static resource path (important)

Create a new ueditor directory under the static directory under the project

Move the js file in the ueditor directory under the DjangoUeditor directory to the ueditor in the static directory of the project

Modify the project urls file

The following are the new items

From django.conf.urls import url,include...import xadminimport DjangoUeditorurlpatterns = [url (r'^ xadmin/', xadmin.site.urls),... Url (r'^ ueditor/', include ('DjangoUeditor.urls')] from django.conf import settingsif settings.DEBUG: from django.conf.urls.static import static urlpatterns + = static (settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) this is the end of the article on "how to integrate DjangoUeditor Rich text Editor with django xadmin". I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good. Please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.