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': '700',
    'height': '400'
}

 

 

 

按照方法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>

以下是效果