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

版本: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 p_w_picpath 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 p_w_picpath",
     toolbar2: "print preview media | forecolor backcolor emoticons",
     p_w_picpath_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.完成。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章