后台需要加入富文本编辑器于是选择tinymce

官方网站:http://django-tinymce.readthedocs.org/

django-tinymce · PyPI

GitHub:GitHub - jazzband/django-tinymce: TinyMCE integration for Django

1.安装

pip install django-tinymce

2.添加配置

INSTALLED_APPS = (
...
'tinymce',
...
)

3.添加路由配置

urlpatterns = patterns('',
...
path('tinymce/', include('tinymce.urls')),
...
)

4.为model中表添加字段

from django.db import models
from tinymce.models import HTMLField class MyModel(models.Model):
...
content = HTMLField()

5.需要将静态文件导出到项目目录下

python  manage.py  collectstatic

将会把静态文件导出到STATIC_URL指定的目录下

  

6.可以对编辑器进行配置私有化定制

TINYMCE_DEFAULT_CONFIG = {
'theme': 'silver',
'width': 1000,
'height': 400,
'language': 'zh_CN',
"menubar": "file edit view insert format tools table help",
"plugins": "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount spellchecker",
"toolbar": "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment code",
 }

效果:

Django admin 结合富文本编辑器tinymce的更多相关文章

  1. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  2. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  3. 富文本编辑器 tinymce 的安装与使用

    百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...

  4. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  5. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  6. 富文本编辑器TinyMCE

    最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...

  7. 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件wordpaster

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  8. 富文本编辑器TInyMCE,本地图片上传(Image Upload)

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  9. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  10. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

随机推荐

  1. BOM – Cookie 和 LocalStorage

    前言 Cookie 和 LocalStorage 是非常基础的东西. 我是学编程后, 第 3 年才开始写博客的, 所以很多在第 1, 2 年学的知识完全都没有记入下来. (比如 C#, JS 语法等等 ...

  2. Adobe Acrobat XI Pro 合并多个PDF文件时弹出Flash提示

    事件起因: 某知名同事在使用 Acrobat XI Pro 软件合并多个PDF文件时弹出Flash提示报错,需要安装 FlashPlayer   解决办法: 合并文件的时候右上角选项-文件类型,选择& ...

  3. 【赵渝强老师】什么是PL/SQL?

    一.什么是PL/SQL? PL/SQL(Procedure Language/SQL)是oracle在标准的sql语言上的扩展.ql/sql不仅允许嵌入sql语言,还可以定义变量和常量,允许私用条件语 ...

  4. duxui:基于Taro,兼容React Native、小程序、H5的多端UI库

    duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序.H5.React Native,库中提供了60+的组件,覆盖大部分使用场景 它能帮助你通过统一的组件样式,快速完成多端应用的开发 ...

  5. /proc/sys/vm 使用

    这些参数主要是用来调整virtual memory子系统的行为以及数据的写出(从RAM到ROM). 这些节点(参数)的默认值和初始化的过程大部分都可以在mm/swap.c中找到. 目前,/proc/s ...

  6. 数据库周刊54丨2020 年度报告:PingCAP、腾讯云数据库、人大金仓、GoldenDB ;CPU 100% SQL优化案例;Mysql内存溢出处理;sql server PK openGauss;Oracle 巡检说明书;避免删库跑路黑天鹅……

    热门资讯 1.PingCAP 2020 年度报告|相信开放的力量 [摘要]本文为PingCAP 2020年度报告.盘点了PingCAP里程碑大事件:完成D轮2.7亿美元融资,创造全球数据库历史新的里程 ...

  7. 数据库周刊60丨3月国产数据库排行榜出炉;日本银行数据迁移失败致使业务宕机;阿里云RDS PG13发布;亚健康Oracle数据库故障定位;Redis最佳实践;MySQL查询优化……

    热门资讯 1.2021年3月国产数据库排行榜:雏凤声清阿里三连 绝代双骄华为合璧 [摘要]2021年3月国产数据库流行度排行榜已出炉,在本月排行的前十名中,TiDB 仍然以领先第二名135分 的优势稳 ...

  8. C# 中的数组使用

    · // 数组 /// 数组是一组相同类型的数据(ps:js中的数组可以不同类型) 访问通过索引访问数组元素 /// 数组的声明 要使用 new 使用 {} 来初始化数组元素 还需要指定数组的大小 / ...

  9. C# 的空类型

    // 空类型 null int iii; // 默认 0 bool bbb; // 默认 false bool? b; // 空值 null int? i; // 空值 null string str ...

  10. 封装setItem 和 getItem 本地存储

    store.js 文件 按需导出setItem 和 getItem 函数 :在utils文件里面 : export const setItem = (key, value) => { // 复杂 ...