Django整合tinymce富文本编辑器

Django的管理界面很强大,像我这样的懒人比较喜欢,但是它的content不支持富文本,这就有了与tinymce的整合,为什么不整合别的?我喜欢tinymce! 下载tinymce:https://github.com/aljosa/django-tinymce 

解压后:

图一

将其传到你的网站文件夹里,

我的网站根目录是html,Django项目是mysite,静态文件目录是static;虚拟目录是wenv,那么在html下建立django-tinymce文件夹(其实可以随意建),图一的文件上传到django-tinymce里.

在SSH命令行下输入:

$ source wenv/bin/activate  #请输入$和#号之间的命令,wenv为虚拟目录

$ cd django-tinymce

$ python setup.py install

安装完成后,

将图一的tinymce目录及文件复制到mysite里,

目录结构:

图二

在static文件夹里建立js目录,/html/mysite/tinymce/media/中的tiny_mce复制一份到js目录.

目录结构图:

tiny_mce.js文件是从/html/static/js/tiny_mce/下复制过来,

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 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontselect,fontsizeselect,fullscreen,code",

theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor",

theme_advanced_buttons3 : "tablecontrols,|,hr,sub,sup,|,charmap",

 

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'

});

//代码结束

 

然后在/html/mysite/mysite/settings.py 的

INSTALLED_APPS = (

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.sites',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    # Uncomment the next line to enable the admin:

    'django.contrib.admin',

   'tinymce',  #加上tinymce应用

    # Uncomment the next line to enable admin documentation:

    # 'django.contrib.admindocs',

    'polls', #我学习使用的

    'blog', #刚学建的非常简单的博客

)

将/html/mysite/mysite/urls.py加上:

(r'^tinymce/', include('tinymce.urls')),

成为如下代码:

from django.conf.urls import patterns, include, url

 

# Uncomment the next two lines to enable the admin:

from django.contrib import admin

admin.autodiscover()

from polls.views import index,current_datetime,hours_ahead

from blog.models import Article

 

urlpatterns = patterns('',

    # Examples:

    # url(r'^$', 'polls.views.index', name='index'),

    # url(r'^mysite/', include('mysite.foo.urls')),

    url(r'^$', 'polls.views.index'),

    (r'^tinymce/', include('tinymce.urls')),

    #(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': 'media'}),

     #url(r'^admin/', 'polls.views.index'),

    (r'^time/$', current_datetime),

    (r'^time/plus/(\d{1,2})/$', hours_ahead),

    # Uncomment the admin/doc line below to enable admin documentation:

    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

 

    # Uncomment the next line to enable the admin:

    url(r'^admin/', include(admin.site.urls)),

    (r'^blog/', include('blog.urls')),

)

 

 

在ssh下,

进入/html/mysite目录,

执行命令:python manage.py syncdb

 

进入/html/mysite/blog/目录

修改admin.py为

from blog.models import Category,Article

from django.contrib import admin

 

class TinyMCEAdmin(admin.ModelAdmin):

    class Media:

       js = ('/static/js/tiny_mce/tiny_mce.js', '/static/js/tiny_mce/textareas.js',)

 

admin.site.register(Category)

admin.site.register(Article,TinyMCEAdmin) #Artice中使用tinymce

 

 

进入django后台