The Django project integrates the general method of Rich Text Editor, suitable for kindeditor, xheditor, niceditor, wymeditor, etc.

First of all, please refer to a blog I wrote earlier: how to integrate niceditor into Django to use

Http://blog.csdn.net/huyoo/article/details/4382317

The practice in this article is a common practice.

Follow these steps to integrate kindeditor into the Django project:

1. Code Organization

In the root directory of the project, use manage. PY Startapp RTE creates a folder named RTE, which is short for richtexteditor. create a kindeditor folder under the RTE directory. If you want to use niceditor, create a niceditor, and there may be xheditor. put _ init __. PY indicates that they can be imported.

The directory structure is as follows:

rte/│  models.py│  tests.py│  views.py│  __init__.py│  __init__.pyc│├─kindeditor│      widgets.py│      widgets.pyc│      __init__.py│      __init__.pyc│└─niceditor        widgets.py        widgets.pyc        __init__.py        __init__.pyc

In addition, the template is placed. My approach is to put it under templates.

templates|-- editor|    kindeditor.html|    niceditor.html|    xheditor.html

And so on.

2. Custom Widgets

Is to create a kindeditor class, inherited from textarea (forms. textarea), the Code is as follows:
File Name: RTE/kindeditor/Widgets. py

Content:

from django import formsfrom django.conf import settingsfrom django.utils.safestring import mark_safefrom django.template.loader import render_to_stringfrom django.template import RequestContextfrom django.utils.translation import ugettext_lazy as _class KindEditor(forms.Textarea):    class Media:        css = {              'all': (  settings.MEDIA_URL + 'editor/kindeditor-4.0.1/themes/default/default.css',                        settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',),        }        js  = (                "%seditor/kindeditor-4.0.1/kindeditor.js" % settings.MEDIA_URL,                settings.MEDIA_URL + 'editor/kindeditor-4.0.1/plugins/code/prettify.js',        )    def __init__(self, attrs = {}):        #attrs['style'] = "width:800px;height:400px;visibility:hidden;"        super(KindEditor, self).__init__(attrs)    def render(self, name, value, attrs=None):        rendered = super(KindEditor, self).render(name, value, attrs)        context = {            'name': name,            'MEDIA_URL':settings.MEDIA_URL,        }        return rendered  + mark_safe(render_to_string('editor/kindeditor.html', context))

In the previous kindeditor version, I used the latest version 4.0.1.

3. Content of the 'editor/kindeditor.html 'template:

The main content is the same as in the previous article. It is just a javascript code used to convert textarea into an online HTML editor. kindeditor is used. The main content is as follows:

<script type="text/javascript">KindEditor.ready(function(K) {    var options = {        cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',                    '{{MEDIA_URL}}editor/kindeditor-4.0.1//plugins/code/prettify.css')        width : '680px',        height : '400px',        filterMode : true    };    var editor = K.create('textarea[name="content"]', options);});                    </script>

Note that you must use the kindeditor variable to initialize the Rich Text Editor. Some documents on the official website of kindeditor are not updated in time. do not use show or uppercase K. debugging in chrome will prompt that Ke is undefined, K is undefined, and so on. for more information about the options, see the official documentation of kindeditor. py is predefined first, but I think it is not as convenient as defining it in the template file.

4. Define a form in the forms. py of an app, regardless of whether the foreground background can be used:

File Name example: ddtcms \ blog \ forms. py

File Content:

from django import formsfrom django.utils.translation import ugettext_lazy as _from ddtcms.blog.models import Blogfrom rte.kindeditor.widgets import KindEditorclass MyBlogAdminForm(forms.ModelForm):    content   = forms.CharField(label=_(u"Content"), widget=KindEditor(attrs={'rows':15, 'cols':100}),required=True)              class Meta:        model = Blog

The form. modelform must be used in admin and view. If it is only used in view, forms. modelform.

 

Kindeditor should be used in forms. py of other apps according to the above 4th articles. The things have basically ended here, isn't it very convenient?

Like xheditor, wymeditor, and so on, you can try it by yourself. The method is described in this article.

 

Note: codenong Ken wrote an article "Django easily uses Rich Text Editor-kindeditor ":

Http://www.cnblogs.com/ken-zhang/archive/2010/12/16/django_widget_kindeditor.html

The main problems in this article are:

1. kindeditor has been upgraded and has not been moved yet. Therefore, if you directly copy and use it, you will find that Ke is undefined.

2. The problem lies in JS and template inheritance.

Where the article is to be modified is: JS, because ke seems to be undefined in version 4.0.1 and needs to be used as follows:

<script type="text/javascript">KindEditor.ready(function(K) {var options = {    cssPath : ('{{MEDIA_URL}}editor/kindeditor-4.0.1/themes/default/default.css',                '{{MEDIA_URL}}editor/kindeditor-4.0.1/plugins/code/prettify.css')    width : '680px',    height : '400px',    filterMode : true};var editor = K.create('textarea[name="content"]', options);});                    </script>

In order to use the codelanguage method, kindeditoruses the prettyprintcharacter, so prettify.css is added here.
-------------
The template is inherited from admin/change_form.html.
An error occurs. Caught keyerror while rendering: 'opts' in admin interface.
Some people asked this question in stackoverflow:

Http://stackoverflow.com/questions/7377324/caught-keyerror-while-rendering-opts-in-admin-interface

However, the answer may not be satisfactory. If you put the template in {% block content %}, no error may be reported, but the interface is messy.

Originally, I was planning to apply kindeditor to my Django project according to the methods in the Code Nong article, but after debugging for a few hours, it was not successful.
In the end, I used the previous method to rewrite widgets, or render the widget as I used to encapsulate niceditor.

The old method creates new articles and old experiences help solve new problems !!!

For more comments!