django 安装 Tinymce 富文本编辑器

2019独角兽企业重金招聘Python工程师标准>>>

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

这样就可以了。下面是图：

转载于:https://my.oschina.net/u/993130/blog/468143