文档章节

django 安装 Tinymce 富文本编辑器

 我的去哈哈
发布于 2015/06/17 23:49
字数 742
阅读 180
收藏 0

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

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


© 著作权归作者所有

粉丝 3
博文 57
码字总数 55253
作品 0
东城
私信 提问
在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器; 定制...

Kinegratii
2014/08/31
5.4K
0
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
2018/08/27
288
0
SAE折腾记:Django添加tinyMCE编辑器

我建立在SAE上使用Django建立的博客已经完成最基本的功能了,可是Admin里还缺一个好用的HTML编辑器,我就在百度+Google上折腾来去,折腾了几天,只弄好了tinyMCE。毕竟这个最简单嘛,至于神马...

炸酱面
2012/05/09
4K
5
关于 TinyMCE 显示 Html 错误的问题

你好,我的网页有崁入 TinyMCE 这个 HTML 富文本编辑器。 TinyMCE 版本是 2,1 我有一个 HTML 档案的原始码如下 我如果从 javascript 程序中从 Server 中读取档案再用 TinyMCE显示, 就无法显...

Arthur1977
2014/12/20
1K
0
TinyMCE 4.7.5 发布,JavaScript 富文本编辑器

TinyMCE 4.7.0 已发布,这是一个 Bug 修复版本。 TinyMCE 是一款 JavaScript 富文本编辑器,包含 40 多种强大的编辑功能。 更新内容: 修复了当编辑器处于 inline 模式时无法编辑 codesample...

王练
2018/01/25
2.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
17分钟前
2
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
4
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
13
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部