版本: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.完成。

最后说一句,不同的环境肯定有多少区别,找对思路,即能完成你想要的功能。

转载于:https://blog.51cto.com/likunheng/1596177

Django 配置App特定类的富文本编辑器相关推荐

  1. 百度富文本编辑器使用方法 html,配置使用百度提供的富文本编辑器ueditor(以项目实例图文步骤演示具体配置步骤)...

    一.对比分析 下面来具体研究分析下百度提供的富文本编辑器,个人主要觉得对于代码语言嵌入及模拟word文本编辑相比于其他编辑器还是可以得,对于xwood里面涉及的代码嵌入使用的就是其功能,缺点在手机浏览 ...

  2. 富文本编辑器CKEditor配置及使用 - 转载篇

    文章目录 配置教程 配置教程 原文地址:富文本编辑器CKEditor配置及使用

  3. TinyMCE富文本编辑器自动链接插件 AutoLink配置

    TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...

  4. IDempiere 富文本编辑器优化

    1.CKEditor中文繁体转简体中文 1.1 效果展示 1.2 解决方案 1.2.1 打开WTextEditorDialog.java 1.2.2 将createEditor方法中的lang.put ...

  5. Django下富文本编辑器Ueditor的配置和使用

    1.前言 "人生苦短,我用Python",Python作为一门"万能"的脚本语言,深受各个技术层级的程序猿的喜爱,而Django作为最受欢迎的Python的We ...

  6. 11. Django 引入富文本编辑器KindEditor

    打开微信扫一扫,关注微信公众号[数据与算法联盟] 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Gith ...

  7. Django框架—富文本编辑器

    借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的.所见即所得的页面 此处以tinymce为例,其它富文本编辑器的使用也是类似的 在虚拟环境中安装包 pip install dj ...

  8. django 与 百度 ueditor 富文本编辑器集成

    django 是基于 python 的一个很好的web开发框架.ueditor 是百度开源的一个富文本编辑器.有很好的用户体验,很适合中国人使用的一个编辑器. 在使用ueditor 之前,我集成过 f ...

  9. Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .

    首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...

  10. django快速集成富文本编辑器wangeditor

    django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...

最新文章

  1. Detail-Preserving Pooling in Deep Networks
  2. nexus-3.6.0-02-unix.tar.gz安装(Centos下),maven setting.xml配置案例,项目root的pom.xml配置,parent-pom的pom.xml配置案例
  3. Ng第二课:单变量线性回归(Linear Regression with One Variable)
  4. 行业分析-实战价值方法
  5. 非职业程序员的工具箱
  6. pymongo操作方法
  7. python并行线程倒计时_[python 并行2]线程
  8. c语言文本格式自动对齐,c语言文件读取原始数据是1、2列是按相同的一起排列命名为Yi- 爱问知识人...
  9. Pycharm中如何pip下载包更快
  10. MFC采用定时器绘制简单动画
  11. jdk32位安装包下载_Win10离线安装.NET Framework 3.5方法汇总(附下载)
  12. 小程序发布上线流程_微信小程序发布_审核上线流程及注意事项_企业服务汇
  13. 跨国项目要注意时区问题
  14. 交互组件滚动条,搜索框,上传组件,翻页的微创新
  15. 很棒的WPF控件库 Newbeecoder.UI
  16. 【毕业设计】stm32单片机智能扫地机器人 - 嵌入式 物联网
  17. LeetCode-完成旅途的最少时间
  18. 4-鸡肉为何如此受欢迎
  19. 微信小程序Vant Weapp里面Calendar 日历组件不显示的问题
  20. 全网最全数据湖面试题

热门文章

  1. autocad.net QQ群:193522571 判断string中是否包含集合中所有的字符串
  2. 游戏及开发人员的认识
  3. 首个万人远程培训项目顺利启动
  4. JavaScript-Tool:CKFinder
  5. [Oracle]分区索引
  6. 怎样把win7系统下的屏幕设置成护眼的非常柔和的豆沙绿色?
  7. Linq to SQL 语法查询....子查询 in操作 join
  8. python代码打错怎么删除_Python程序员最常犯的十个错误
  9. 黑体std能商用_用产品诠释商用PC成功之道 惠普战66高性能商用一体机评测
  10. redis之列表字典操作