Django集成TinyMCE(admin后台+前台)

Django版本1.11，操作系统windows 7，在pycharm的terminal中使用pip install django-tinymce下载tinymce（前提是装的python里有pip功能），当然也可以手动下载好后python setup.py install进行安装。

在网上找了好多资料，有说什么新创建个textarea.js什么的云云，还要新创建个static文件什么的，感觉挺麻烦的，因此把我的方法分享给大家。

找到使用pip安装的django-tinymce，如果没有更改路径的话，应该就是在装的python文件里的Lib->site-packages（我的是D:\Python27\Lib\site-packages），有一个tinymce文件夹。打开这个文件夹，发现这其实就是一个django模块有没有。既然是django模块，那么我们在我们自己的project里引用这个模块不就行了？

具体步骤：

1.      将tinymce文件夹复制到你自己的project里面，tinymce相当于是一个APP；

2.      在project文件夹的setting里注册tinymce：在settings.py里找到INSTALLED_APPS；

INSTALLED_APPS = (

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'tinymce',

)

3.      上面两步已经将tinymce成功引入了project，那么怎么用呢？打开你自己的app，比如我的 是blog/models.py，使用from tinymce.models import HTMLField，这里HTMLField就为我们提供了一个富文本编辑器。下面给出一个模块例子：

 # -- coding: utf-8 --
 from django.db import models
 from django.contrib import admin
 from tinymce.models import HTMLField
 # Create your models here.

 class BlogsPost(models.Model):

     title = models.CharField(max_length=150)
     # body = models.TextField()
     body = HTMLField()
     timestamp = models.DateTimeField()
     auth = models.TextField(default='秋寻草')
     address = models.CharField(max_length=100, default='西安')

4.      如何配置tinymce：tinymce里默认的是最简单的样式，而且宽度和高度看起来也挺别扭的，需要我们自己配置，有两种配置方式。

方法1、

　　打开tinymce文件，找到settings.py，打开，找到DEFAULT_CONFIG选项，这个选项是配置选项。将{'theme': "simple", 'relative_urls': False}改成：

{'theme': "advanced",'relative_urls': False,’width’:’1200’,’height’:’500’}，此种富文本框还是很简单；

方法2、

　　修改工程的settings.py文件。最下面添加

 TINYMCE_DEFAULT_CONFIG = {
     # // 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',

     # // 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': '',
     'height': ''
 }

按照方法2配置后，我们已经成功将TinyMCE富文本编辑器整合进了我们自己的django网站项目。以下是成果图：

前台页面使用tinymce:

STEP 1:
在模板的head中添加如下代码

 <script src="/static/tiny_mce/tiny_mce.js"></script>
 <script>
     tinyMCE.init({
         'mode':'textareas',
         'theme':'advanced',
         'width':450,
         'height':300
     })
 </script>

STEP 2：

模板中添加textarea 标签，tinymce会自动把此标签变为富文本框

 <form action="">
     <label>
         <textarea name="comment_content">富文本</textarea>
     </label>
     <br>
     <input type="submit" value="提交评论" class="btn btn-default">
 </form>

以下是效果