django 安裝 Tinymce 富文本編輯器

http://rsj217.diandian.com/post/2013-09-14/40053589622  --內容來源 最好的內容

django 裏引用 Tinymec 富文本編輯器，其實很簡單，前提是你知道django 的靜態文件配置。在  Django 靜態文件和媒體文件配置...  作了詳細的闡述。

安裝條件

Tinymec 官網下載最新版。解壓以後 以下圖，其中 config.js 是沒有的。

圖中也能夠看出，tinymec 放在硬盤上的目錄，即靜態文件夾下的 scripts 裏面，這個目錄是隨便建的。

安裝原理

安裝的原理很簡單，只須要在使用 編輯器 的 頁面 裏 引用 tinymce.min.js 文件並初始化就能夠了。tinymce.min.js 文件在 tinymce 項目裏。tinymce.min.js 會根據初始配置裏的信息找到須要用編輯器的 html 節點

例如 在 post.html 頁面使用編輯器

只須要在模板文件寫下：

<script type="text/javascript" src="{{ STATIC_URL }}scripts/tinymce/tinymce.min.js"></script>
                                 
<script type="text/javascript">
                                 
    tinyMCE.init({
                                 
        mode : "textareas",
                                 
        theme : "modern",
                                 
    });
                                 
</script>

這段代碼的含義是 初始化 tinyMCE編輯器，mode 指須要將編輯器顯示在 html 那個標籤節點，這裏選了 textareas。則表示  <textareas>會變成 編輯器所在的位置。

其中 {{ STATIC_URL }} 是django 的靜態文件目錄

自定義編輯器

自定義編輯器，只須要根據官方文檔，重寫 tinyMCE.init();爲了方便，我將 tinyMCE.init(); 代碼寫入 config.js 裏，方便多處調用。

config.js

tinyMCE.init({
                                
    mode : "textareas",
                                
    theme : "modern",
                                
    width: '780px',
                                
    language: 'zh-cn',
                                
    plugins: [
                                
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
                                
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                                
        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
                                
    ],
                                
    menubar: false,
                                
    toolbar_items_size: 'small',
                                
    toolbar1: "undo redo | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright | bullist blockquote link unlink code | pagebreak preview fullscreen | fontselect fontsizeselect",
                                
    content_css : '/static/scripts/tinymce/skins/custom/custom.css'
                                
});

前臺效果圖：

後臺（admin）使用

知道了 tinymec 安裝原理，後臺使用就簡單了，當初我不知道，google了N 篇文章只有簡單的羅列，沒有說原理，各自配置，各類不成功，彎路沒少走。

對於後臺安裝也是同樣，模板引用就好了。那麼後臺模板在哪裏呢？ 在 django 源碼裏。通常爲 python27/lib/python2.7/site-packages/django/contrib/admin/templates/admin 裏面有個 base.html 引用 下面兩行代碼就能夠了

<script type="text/javascript" src="{{ STATIC_URL }}scripts/tinymce/tinymce.min.js"></script>
                      
<script type="text/javascript" src="{{ STATIC_URL }}scripts/tinymce/config.js"></script>

這樣作有個弊端，就是更改了 django 源碼。另一種作法是 自定義 admin模板，重寫對應的模板。

還有一種方法更簡單。不須要對模板作什麼。咱們要作的就是在須要使用編輯器的admin界面引用tinymce js文件。那麼在 admin.py 裏能夠設置對於model 管理器下的靜態文件引用設置

例如 models 有個 PrivateMessage， 其中 privatemsg 須要增長編輯器

models.py

class PrivateMessage(models.Model):
                      
    privatemsg = models.TextField(
                     
        u'私信', max_length=1000, default='', blank=True)

amdin.py

class PrivateMessageAdmin(admin.ModelAdmin):
                  
    list_display = ('id', 'sender', 'privatemsg', 'receiver', 'isreder')
                  
    class Media:
                  
        js = (
                  
            '/static/scripts/tinymce/tinymce.min.js',
                  
            '/static/scripts/tinymce/config.js',
                  
        )

這樣就能夠了。下面是圖：