Django 配置App特定類的富文字編輯器

標籤：django   富文字編輯器   

版本：Django:1.6  Python:2.7

1. 下載TinyMCE。http://www.tinymce.com/download/download.php

2. 解壓。將其中的tinymce檔案夾放在Django的靜態檔案目錄/static/下。

3. 在tinymce檔案夾中已經有tinymce.min.js這個JS檔案；我們需要做的是在目前的目錄下（與tinymce.min.js同級）另外建立一個tinymce_config.min.js：

   填充內容如下：

   tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "emoticons template paste textcolor"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    visualblocks_default_state: true,
    width: 1000,
    height: 400,
    //content_css: "/static/blog/css/tinymce.css"
   });

4. 進入tinymce/skins/lightgray/,修改skin.min.css檔案，尋找.mce-tinymce部分，添加一個 margin-left 參數，即改為 .mce-tinymce{visibility:visible !important;margin-left:100px; position:relative} ，即可將編輯器右移 100px，將 Label 顯露出來。

5. 在要顯示富文字編輯器的類models.py下面添加如下代碼：

   class ArticleAdmin(admin.ModelAdmin):
       list_display=("id","Title","Author","CreateDate",)
       search_fields=("Title",)

        class Media:
            js=[‘tinymce/tinymce.min.js‘,‘tinymce/tinymce_config.min.js‘]

6.完成。

最後說一句，不同的環境肯定有多少區別，找對思路，即能完成你想要的功能。

本文出自 “藍鰭豚” 部落格，請務必保留此出處http://likunheng.blog.51cto.com/9527645/1596177

Django 配置App特定類的富文字編輯器