django-tinymce 支持富文本编辑器

好东西留一份,转自 http://blog.csdn.net/cugyyt/article/details/5779120

 

先展示一个呵呵：

 

 

流程大致如下：

1：下载最新版本的tinymce

2：解压然后把tinymce放到你的meida目录下，我放在media下的js文件夹里（media和js如果没有自己创建），结构下：

 

 

 

 

 

3：编辑urls.py,在urlpatterns中添加(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',    {'document_root': 'media'})

4：在PostAdmin设置js的路径

5：在js下添加textareas.js，其内容为：

 

view plain

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1. tinyMCE.init({  
2.     // General options  
3.     mode : "textareas",  
4.     theme : "advanced",  
5.     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",  
6.    
7.     // Theme options  
8.     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",  
9.     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",  
10.     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",  
11.    
12.     theme_advanced_toolbar_location : "top",  
13.     theme_advanced_toolbar_align : "left",  
14.     theme_advanced_statusbar_location : "bottom",  
15.     theme_advanced_resizing : true,  
16.    
17.     // Example content CSS (should be your site CSS)  
18.     //content_css : "/css/style.css",  
19.    
20.     template_external_list_url : "lists/template_list.js",  
21.     external_link_list_url : "lists/link_list.js",  
22.     external_image_list_url : "lists/image_list.js",  
23.     media_external_list_url : "lists/media_list.js",  
24.    
25.     // Style formats  
26.     style_formats : [  
27.         {title : 'Bold text', inline : 'strong'},  
28.         {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},  
29.         {title : 'Help', inline : 'strong', classes : 'help'},  
30.         {title : 'Table styles'},  
31.         {title : 'Table row 1', selector : 'tr', classes : 'tablerow'}  
32.     ],  
33.    
34.     width: '700',  
35.     height: '400'  
36.    
37. });  

 

 

然后运行django内嵌的服务器，就ok了！！！！

 

这时候如果发现 富文本编辑是 英文的 ,如果想把她变成中文的 需要到 官网上下载一个 语言包 

 

download -> language download -> 選需要的語系下載... -> copy到正確的目錄

 

下载后 是个这样子的 tinymce_language_pack.zip ,把该包里的内容 拷贝到 tinymce\jscripts 下.

 

最后一步,把调用处 设置一下语言,默认是en 不做任何设置的

 

tinyMCE.init({

    language : "zh-cn",

...

})