django 整合富文本编辑器 tiny_mce

from:http://blog.csdn.net/fuwencaho/article/details/41164901

在整合富文本编辑器的过程中,遇到过一些问题,但是总算是好了,遇到的问题主要还是心情不太好,所有有点不知所错,开始之前也没好好分析一下问题就开始瞎弄,所以花了很长时间,现在的状态是可以在admin后台中使用富文本编辑,前台的还没写

在整个过程中,不需要做太多,只要到官网 http://www.tinymce.com/download/download.php 下载代码放到服务器上,在注册model的时候配好admin的行为就ok了,具体步骤如下

一;下载代码

刚开始使用的是tinymce_4.1.6.zip,但是过程中报很多文件找不到,就下了tinymce_3.5.11.zip版本

二;服务器目录

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost timtest2]# tree . -L 3  
  2. .  
  3. ├── db.sqlite3  
  4. ├── edit  
  5. │   ├── admin.py  
  6. │   ├── admin.pyc  
  7. │   ├── __init__.py  
  8. │   ├── __init__.pyc  
  9. │   ├── models.py  
  10. │   ├── models.pyc  
  11. │   ├── tests.py  
  12. │   └── views.py  
  13. ├── manage.py  
  14. ├── media  
  15. │   └── js  
  16. │       ├── textareas.js  
  17. │       ├── textareas.js.bak  
  18. │       ├── tiny_mce                     #这是提取出来的代码  
  19. │       └── tinymce_3.5.11.zip  
  20. └── timtest2  
  21.     ├── __init__.py  
  22.     ├── __init__.pyc  
  23.     ├── settings.py  
  24.     ├── settings.pyc  
  25.     ├── urls.py  
  26.     ├── urls.pyc  
  27.     ├── wsgi.py  
  28.     └── wsgi.pyc  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost js]# tree tiny_mce/ -L 1  
  2. tiny_mce/  
  3. ├── langs  
  4. ├── license.txt  
  5. ├── plugins  
  6. ├── themes  
  7. ├── tiny_mce.js  
  8. ├── tiny_mce_popup.js  
  9. ├── tiny_mce_src.js  
  10. └── utils  

三;models.py 文件

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost edit]# more models.py  
  2. from django.db import models  
  3. from django.contrib import admin  
  4.   
  5. # Create your models here.  
  6. class Blog(models.Model):  
  7.     pub_date = models.DateField()  
  8.     headline = models.CharField(max_length=200)  
  9.     content = models.TextField()  
  10. class BlogAdmin(admin.ModelAdmin):  
  11.     class Media:  
  12.         js = (  
  13.             '/media/js/tiny_mce/tiny_mce.js',  
  14.             '/media/js/textareas.js',  
  15.         )  
  16.   
  17. [root@localhost edit]#   

四:admin.py 文件

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost edit]# more admin.py  
  2. from django.contrib import admin  
  3.   
  4. # Register your models here.  
  5. import models  
  6.   
  7. admin.site.register(models.Blog,models.BlogAdmin)  
  8. [root@localhost edit]#   


五:textareas.js 文件

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost js]# more textareas.js  
  2. tinyMCE.init({  
  3.         // General options  
  4.         mode : "textareas",  
  5.         theme : "advanced",  
  6.         plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fulls  
  7. creen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",  
  8.    
  9.         // Theme options  
  10.         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselec  
  11. t,fullscreen,code",  
  12.         theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttim  
  13. e,preview,|,forecolor,backcolor",  
  14.         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",  
  15.    
  16.         theme_advanced_toolbar_location : "top",  
  17.         theme_advanced_toolbar_align : "left",  
  18.         theme_advanced_statusbar_location : "bottom",  
  19.         theme_advanced_resizing : true,  
  20.    
  21.         // Example content CSS (should be your site CSS)  
  22.         //content_css : "/css/style.css",  
  23.    
  24.         template_external_list_url : "lists/template_list.js",  
  25.         external_link_list_url : "lists/link_list.js",  
  26.         external_image_list_url : "lists/image_list.js",  
  27.         media_external_list_url : "lists/media_list.js",  
  28.    
  29.         // Style formats  
  30.         style_formats : [  
  31.                 {title : 'Bold text', inline : 'strong'},  
  32.                 {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},  
  33.                 {title : 'Help', inline : 'strong', classes : 'help'},  
  34.                 {title : 'Table styles'},  
  35.                 {title : 'Table row 1', selector : 'tr', classes : 'tablerow'}  
  36.         ],  
  37.    
  38.         width: '700',  
  39.         height: '400'  
  40.    
  41. });  
  42. [root@localhost js]#   


六:urls.py 文件
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost timtest2]# more urls.py  
  2. from django.conf.urls import patterns, include, url  
  3.   
  4. from django.contrib import admin  
  5. admin.autodiscover()  
  6.   
  7. urlpatterns = patterns('',  
  8.     # Examples:  
  9.     # url(r'^$', 'timtest2.views.home', name='home'),  
  10.     # url(r'^blog/', include('blog.urls')),  
  11.   
  12.     (r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': 'media'}),  
  13.     url(r'^admin/', include(admin.site.urls)),  
  14. )  
  15. [root@localhost timtest2]#   

可以通过1270.0.1/media/js/textareas.js 访问到文件

七:settings.py文件

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. [root@localhost timtest2]# more settings.py  
  2. """  
  3. Django settings for timtest2 project.  
  4.   
  5. For more information on this file, see  
  6. https://docs.djangoproject.com/en/1.6/topics/settings/  
  7.   
  8. For the full list of settings and their values, see  
  9. https://docs.djangoproject.com/en/1.6/ref/settings/  
  10. """  
  11.   
  12. # Build paths inside the project like this: os.path.join(BASE_DIR, ...)  
  13. import os  
  14. BASE_DIR = os.path.dirname(os.path.dirname(__file__))  
  15.   
  16.   
  17. # Quick-start development settings - unsuitable for production  
  18. # See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/  
  19.   
  20. # SECURITY WARNING: keep the secret key used in production secret!  
  21. SECRET_KEY = '4vid)wp*w-6%+am9p*zww&wn2cfetjodjo)6c-*dojn)e1xa+l'  
  22.   
  23. # SECURITY WARNING: don't run with debug turned on in production!  
  24. DEBUG = True  
  25.   
  26. TEMPLATE_DEBUG = True  
  27.   
  28. ALLOWED_HOSTS = []  
  29.   
  30.   
  31. # Application definition  
  32.   
  33. INSTALLED_APPS = (  
  34.     'django.contrib.admin',  
  35.     'django.contrib.auth',  
  36.     'django.contrib.contenttypes',  
  37.     'django.contrib.sessions',  
  38.     'django.contrib.messages',  
  39.     'django.contrib.staticfiles',  
  40.     'edit',  
  41. )  
  42.   
  43. MIDDLEWARE_CLASSES = (  
  44.     'django.contrib.sessions.middleware.SessionMiddleware',  
  45.     'django.middleware.common.CommonMiddleware',  
  46.     'django.middleware.csrf.CsrfViewMiddleware',  
  47.     'django.contrib.auth.middleware.AuthenticationMiddleware',  
  48.     'django.contrib.messages.middleware.MessageMiddleware',  
  49.     'django.middleware.clickjacking.XFrameOptionsMiddleware',  
  50. )  
  51.   
  52. ROOT_URLCONF = 'timtest2.urls'  
  53.   
  54. WSGI_APPLICATION = 'timtest2.wsgi.application'  
  55.   
  56.   
  57. # Database  
  58. # https://docs.djangoproject.com/en/1.6/ref/settings/#databases  
  59.   
  60. DATABASES = {  
  61.     'default': {  
  62.         'ENGINE': 'django.db.backends.sqlite3',  
  63.         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),  
  64.     }  
  65. }  
  66.   
  67. # Internationalization  
  68. # https://docs.djangoproject.com/en/1.6/topics/i18n/  
  69.   
  70. LANGUAGE_CODE = 'en-us'  
  71.   
  72. TIME_ZONE = 'UTC'  
  73.   
  74. USE_I18N = True  
  75.   
  76. USE_L10N = True  
  77.   
  78. USE_TZ = True  
  79.   
  80.   
  81. # Static files (CSS, JavaScript, Images)  
  82. # https://docs.djangoproject.com/en/1.6/howto/static-files/  
  83.   
  84. STATIC_URL = '/static/'  
  85. [root@localhost timtest2]#  

没有改过

效果演示












参考资源:
http://imtx.me/archives/215.html      让Django支持富文本编辑器:Tiny_mce篇
http://sleepycat.org/blog/25/                Django Admin 使用 TinyMCE 富文本编辑器

http://www.wutianqi.com/?p=3312Django后台整合TinyMCE富文本编辑器 这个厉害


http://my.oschina.net/zhajiang/blog/56814  这个讲解的比较全
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ueditor HTML编辑器是百度开源的HTML编辑器, 本模块帮助在Django应用中集成百度Ueditor HTML编辑器。 安装包中已经集成Ueditor v1.2.2 使用Django-Ueditor非常简单,方法如下: 1、安装方法 **方法一:下载安装包,在命令行运行: python setup.py install **方法二:使用pip工具在命令行运行(推荐): pip install DjangoUeditor 2、在INSTALL_APPS里面增加DjangoUeditor app,如下: INSTALLED_APPS = ( #........ 'DjangoUeditor', ) 3、在urls.py中增加: url(r'^ueditor/',include('DjangoUeditor.urls' )), 4、在models中这样定义: from DjangoUeditor.models import UEditorField class Blog(models.Model): Name=models.CharField(,max_length=100,blank=True) Content=UEditorField('内容 ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True) 说明: UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。 UEditorField提供了额外的参数: toolbars:配置你想显示的工具栏,取值为mini,normal,full,代表小,一般,全部。如果默认的工具栏不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。 imagePath:图片上传的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹 filePath:附件上传的路径,如"files/",实现上传到"{{MEDIA_ROOT}}/files"文件夹 imageManagerPath:图片管理器显示的路径,如"imglib/",实现上传到"{{MEDIA_ROOT}}/imglib",如果不指定则默认=imagepath。 options:其他UEditor参数,字典类型。参见Ueditor的文档ueditor_config.js里面的说明。 css:编辑器textarea的CSS样式 width,height:编辑器的宽度和高度,以像素为单位。 5、在表单中使用非常简单,与常规的form字段没什么差别,如下: class TestUeditorModelForm(forms.ModelForm): class Meta: model=Blog *********************************** 如果不是用ModelForm,可以有两种方法使用: 1: 使用forms.UEditorField from DjangoUeditor.forms import UEditorField class TestUEditorForm(forms.Form): Description=UEditorField("描述",initial="abc",width=600,height=800) 2: widgets.UEditorWidget from DjangoUeditor.widgets import UEditorWidget class TestUEditorForm(forms.Form): Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={})) widgets.UEditorWidget和forms.UEditorField的输入参数与上述models.UEditorField一样。 6、Settings配置 在Django的Settings可以配置以下参数: UEDITOR_SETTINGS={ "toolbars":{ #定义多个工具栏显示的按钮,允行定义多个 "name1":[[ 'source', '|','bold', 'italic', 'underline']], "name2",[] }, "images_upload":{ "allow_type":"jpg,png", #定义允许的上传的图片类型 "max_size":"2222kb" #定义允许上传的图片大小,0代表不限制 }, "files_upload":{ "allow_type":"zip,rar", #定义允许的上传的文件类型 "max_size":"2222kb" #定义允许上传的文件大小,0代表不限制 },, "image_manager":{ "location":"" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样 }, } 7、其他事项: **本程序基于百度ueditor 1.2.2,安装包里面已经包括了,不需要再额外安装。 **目前暂时不支持ueditor的插件 **Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值