django form 自定制widget

 为了在django中应用百度的ueditor，所以必须自己写个widget。

项目名：mynote 

步骤1：

确定STATIC_URL :

vim mynote/mynote/settings :

STATIC_ROOT = os.path.join(HERE,'static').replace('\\','/')

STATIC_URL = '/static/'

 

步骤2：

python manage.py  startapp rte
＃创建一个rte 的app

 

步骤3：

在rte app 里面 创建三个文件夹：

 

mkdir static
mkdir templates
mkdir ueditor

 

 

步骤4：

下载ueditor ,解压到static 目录中,选择你的app目录里的static

 

 

yeelone@yee:~/workspace/mynote/myapp/static$ ls
ueditor

 

 

步骤5：前面都是准备工作，现在开始编写widget：

 

cd   rte/ueditor

touch __init__.py
touch widgets.py

 

from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.template import RequestContext
from django.utils.translation import ugettext_lazy as _


class Ueditor(forms.Textarea):
    class Media:
        css ={'all': (settings.STATIC_URL + 'ueditor/themes/default/ueditor.css') , }
        js = ("%sueditor/editor_config.js" % settings.STATIC_URL )

    def __init__(self,attrs={}):
        super(Ueditor,self).__init__(attrs)
    def render(self,name,value,attrs=None):
        rendered = super(Ueditor,self).render(name,value,attrs)
        context = {
                'name':name,
                'STATIC_URL':settings.STATIC_URL,
        }

        return rendered + mark_safe(render_to_string('ueditor.html',context))

 

然后再切换到templates 目录中：

 

rte/templates
vim ueditor.html
  <link type="text/css" rel="stylesheet" href="/static/ueditor/themes/default/ueditor.css" /> <script type="text/javascript" src=\'#\'" /static/ueditor/editor_all_min.js" ></script> <script type="text/javascript" src=\'#\'" /static/ueditor/editor_config.js" ></script>

 <script type="text/plain" id="myEditor" name="myContent">
 </script>

 <script type="text/javascript">
     var editor = new baidu.editor.ui.Editor({
             initialContent:'',
                     toolbars: [[ 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough',  'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','fontfamily', 'fontsize','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','imagecenter', '|', 'insertimage', 'emotion', 'insertvideo', 'attachment', 'gmap', 'highlightcode','pagebreak', '|','horizontal', 'date', 'time', 'spechars','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
                         ]],
              autoHeightEnabled:false,
              wordCount:false,
              minFrameHeight:500
              });
    editor.render("myEditor");
    </script>

 

widgets 已经编写完毕。

步骤6：应用到form中：

 

class PostForm(forms.ModelForm):
     from rte.ueditor.widgets import Ueditor

     myContent = forms.CharField(widget=Ueditor())

 

到此就结束了。