Django adds the use of the KindEditor rich text editor

KindEditor introduction:

KindEditor is an open source set of online HTML editors designed to give users a wySIwyg editing effect on web sites. Developers can use KindEditor to replace the traditional multi-line text input box (textarea) with a visual rich text input box.

KindEditor is written by JavaScript and can be seamlessly integrated with Java,.NET, PHP, ASP and other programs. It is suitable for use in CMS, mall, forum, blog, Wiki, E-mail and other Internet applications.

Add KindEditor to Django Admin, which is much better than the dry textarea. The added effect is as follows:

1. Set the path of static file

KindEditor is written in JavaScript, which belongs to static files, so you need to set the static path for Django.

First, create a new static folder in the project directory. Note that you should never create the static folder under my_app/ as the directory for static files. This will cause Django to be unable to search for its own static files.

Once created, configure the static file directory in settings. Add the following code

STATIC_URL = '/static/'
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)

Download KindEditor

Download KindEditor, unzip those useless asp, ES56en. NET, php, jsp, examples files to delete the copy to static directory, KindEditor is js file something editor, so set js/editor directory, and copy the KindEditor code to the directory.

Like this way static/js/editor/kindeditor - 4.1.7

3. Add JavaScript code to html page in admin background management

Create a new config. js file under kindeditor-4.1.7, with the following contents:

KindEditor.ready(function(K) {
 window.editor = K.create('#id_content',{
  //  Specify the size 
  width:'800px',
  height:'200px',
 });
});

4. Add class Media to the management class of ES86en. py, and introduce js file

Here is a complete example of ES93en.py

Note: class 1 must be in front of admin.site.register, otherwise the program will report an error and show no define

from django.contrib import admin
from .models import category,tags,article
# Register your models here.
class articleAdmin(admin.ModelAdmin):
 list_display = ('id','title','create_time','change_time','type') # Add field display 
 search_fields = ('title') # Add a quick query bar 
 class Media:
  #  In the administration background HTML Add to the file js file ,  every 1 Every path is appended STATIC_URL/
  js = (
   '/static/js/editor/kindeditor-4.1.7/kindeditor-all.js',
   '/static/js/editor/kindeditor-4.1.7/lang/zh_CN.js',
   '/static/js/editor/kindeditor-4.1.7/config.js',
  )
admin.site.register(category)
admin.site.register(tags)
admin.site.register(article,articleAdmin)

conclusion