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

项目名：mynote 

步骤1：

确定STATIC_URL :

vim mynote/mynote/settings :

 
  
  1. STATIC_ROOT = os.path.join(HERE,'static').replace('\\','/') 
  2.  
  3. STATIC_URL = '/static/' 
 
  
 
 
  
步骤2：
 
  
 
  
  1. python manage.py  startapp rte  
  2. ＃创建一个rte 的app 
 
  
 
 
  
步骤3：
 
  
在rte app 里面 创建三个文件夹：
 
  
 
 
  
 
  
  1. mkdir static  
  2. mkdir templates  
  3. mkdir ueditor  
 
  
 
 
  
 
 
  
步骤4：
 
  
下载ueditor ,解压到static 目录中,选择你的app目录里的static
 
  
 
 
  

      
  
 
  
 
  
  1. yeelone@yee:~/workspace/mynote/myapp/static$ ls 
  2. ueditor 
 
  
 
 
  
 
 
  
步骤5：前面都是准备工作，现在开始编写widget：
 
  
 
 
  
 
  
  1. cd   rte/ueditor 
  2.  
  3. touch __init__.py  
  4. touch widgets.py 
 
  
 
 
  
 
  
  1. from django import forms 
  2. from django.conf import settings 
  3. from django.utils.safestring import mark_safe 
  4. from django.template.loader import render_to_string 
  5. from django.template import RequestContext 
  6. from django.utils.translation import ugettext_lazy as _ 
  7.  
  8.  
  9. class Ueditor(forms.Textarea): 
  10.     class Media: 
  11.         css ={'all': (settings.STATIC_URL + 'ueditor/themes/default/ueditor.css') , } 
  12.         js = ("%sueditor/editor_config.js" % settings.STATIC_URL ) 
  13.  
  14.     def __init__(self,attrs={}): 
  15.         super(Ueditor,self).__init__(attrs) 
  16.     def render(self,name,value,attrs=None): 
  17.         rendered = super(Ueditor,self).render(name,value,attrs) 
  18.         context = { 
  19.                 'name':name, 
  20.                 'STATIC_URL':settings.STATIC_URL, 
  21.         } 
  22.  
  23.         return rendered + mark_safe(render_to_string('ueditor.html',context)) 
 
  
 
 
  
然后再切换到templates 目录中：
 
  
 
 
  
 
  
  1. rte/templates 
  2. vim ueditor.html  
  3.   <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>
  4.  
  5.  <script type="text/plain" id="myEditor" name="myContent"> 
  6.  </script> 
  7.  
  8.  <script type="text/javascript"> 
  9.      var editor = new baidu.editor.ui.Editor({ 
  10.              initialContent:'', 
  11.                      toolbars: [[ 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough',  'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','fontfamily', 'fontsize','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','p_w_picpathcenter', '|', 'insertp_w_picpath', 'emotion', 'insertvideo', 'p_w_upload', 'gmap', 'highlightcode','pagebreak', '|','horizontal', 'date', 'time', 'spechars','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 
  12.                          ]], 
  13.               autoHeightEnabled:false, 
  14.               wordCount:false, 
  15.               minFrameHeight:500 
  16.               }); 
  17.     editor.render("myEditor"); 
  18.     </script> 
 
  
 
 
  
widgets 已经编写完毕。
 
  
步骤6：应用到form中：
 
  
 
 
  
 
  
  1. class PostForm(forms.ModelForm): 
  2.      from rte.ueditor.widgets import Ueditor 
  3.  
  4.      myContent = forms.CharField(widget=Ueditor()) 
 
  
 
 
  
到此就结束了。