最基本的原理就是在admin中的TextAreas中添加两个js文件,一个是配置文件,一个是TinyMCE的调用文件。
1,从TinyMCE官方网站下载最新版TinyMCE。地址:http://tinymce.moxiecode.com/download.php
2,解压文件,获取tinymce/jscripts/目录下的tiny_mce文件。将其放入一个js文件夹中,这个js文件夹根据个人喜好可以放到不同的地方,我就直接放到了网站/media/js/tiny_mce。因为我将网站的/media/链接为/home/liusai/django_admin。所以目录就是如下。
3,创建配置文件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′
});
4,接下来就是让admin调用这两个js文件了。
找到工程文件下需要调用的models.py文件。以我为例,找到blog/models.py
打开,看到如下代码:
from django.db import models
class Reporter(models.Model):
full_name = models.CharField(maxlength=70)
def __unicode__(self):
return self.full_name
class Admin:
pass
class Article(models.Model):
pub_date = models.DateTimeField()
headline = models.CharField(maxlength=200)
article = models.TextField()
reporter = models.ForeignKey(Reporter)
def __unicode__(self):
return self.headline
class Admin:
js = (‘../media/js/tiny_mce/tiny_mce.js’, ‘../media/js/textareas.js’,)
上面红色的class Admin:开始就是调用js文件的方式了,因为上面的class Article(models.Model):中有一个article = models.TextField()。所以就可以使用tinyMCE可视化编辑器。其中js=()这段就是我所些的路径,暂时因为url.py问题没有很好把握,所以现这样,如果你添加了js=()这段,但是没有什么变化,你就要检查加载js的url地址有没有错误。很简单,直接查看源文件。