django-tinymce 支持富文本编辑器

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

 

先展示一个呵呵:

 

django-tinymce 支持富文本编辑器_第1张图片

 

流程大致如下:

1:下载最新版本的tinymce

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

 

django-tinymce 支持富文本编辑器_第2张图片

 

 

 

 

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

4:在PostAdmin设置js的路径

django-tinymce 支持富文本编辑器_第3张图片

5:在js下添加textareas.js,其内容为:

 

·········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",

...

})

 

 

 

你可能感兴趣的:(django,tinymce)