django + TinyMCE 实现富文本编辑器

（django 1.4）

首先下载TinyMCE，加压后提出文件，目录为

在项目跟目录，新建static目录，存放静态文件，项目目录为：

然后在app -->  models.py 新加类

class Text(models.Model):title = models.TextField()

（注： 实体里的TextField字段才会被替换）

在app--> admin.py 中添加该模型的管理类（老版本的django配置方式不同，请参考官网说明--标题是3）

class TextAdmin(admin.ModelAdmin):class Media:js=('tiny_mce/tiny_mce.js','textareas.js')

admin.site.register(Text, TextAdmin)

‘’‘class Media:
js=('tiny_mce/tiny_mce.js',
'textareas.js')’‘’

这是重点，可能现在还是看不懂，木关系，咱们来配置setting，如下

STATIC_URL = '/static/'# Additional locations of static filesSTATICFILES_DIRS = (     os.path.join(os.path.dirname(__file__), '../static/').replace('\\','/'),)

访问localhost:8000/admin/ ，查看Text对象，可以发现，TextField已被替换为TinyMCE  的编辑框。搞定，收工。

如果有盆友和我一样菜鸟一只，做如上操作可能出现不报错但是没出现编辑框的情况，最简单的办法就是查看页面的源文件，看看js文件是不是引入了，路径对不对。

最后，附上textareas.js，实为配置文件

tinyMCE.init({      // General options      mode : "textareas",      theme : "advanced",      plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",         // Theme options      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",      theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor",      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",         theme_advanced_toolbar_location : "top",      theme_advanced_toolbar_align : "left",      theme_advanced_statusbar_location : "bottom",      theme_advanced_resizing : true,         // Example content CSS (should be your site CSS)      //content_css : "/css/style.css",         template_external_list_url : "lists/template_list.js",      external_link_list_url : "lists/link_list.js",      external_image_list_url : "lists/image_list.js",      media_external_list_url : "lists/media_list.js",         // Style formats      style_formats : [          {title : 'Bold text', inline : 'strong'},          {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},          {title : 'Help', inline : 'strong', classes : 'help'},          {title : 'Table styles'},          {title : 'Table row 1', selector : 'tr', classes : 'tablerow'}      ],         width: '700',      height: '400'     });