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',
                  
        )

这样就能够了。下面是图：