后台需要加入富文本编辑器于是选择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. JavaScript – Object.groupBy & Map.groupBy

    前言 group by 是一个很常见的功能,但 JS 却没有 build-in 的方法,一直到 es2024 才有 Object.groupBy (前生是 Array.prototype.group) ...

  2. Angular 18+ 高级教程 – Component 组件 の Angular Component vs Web Component

    前言 在 初识 Angular 中我有提到, Angular 团队是一群不爱创新.爱 follow 标准.爱小题大做的一群人. 所以,要理解 Angular Component,我们就非得要先搞懂远古 ...

  3. CSS & JS Effect – 脉冲 Pulse Play Button

    效果 参考 Youtube – Create a pulsing animation with CSS 重点 在背后做一个一样大的 div border 然后 animation scale up. ...

  4. SQL Server Temporary Table & Table Variable (临时表和表变量)

    参考: 在数据库中临时表什么时候会被清除呢 Temporary Tables And Table Variables In SQL 基本常识 1. 局部临时表(#开头)只对当前连接有效,当前连接断开时 ...

  5. USB总线-Linux内核USB3.0设备控制器中断处理程序分析(九)

    1.概述 USB设备枚举.请求处理.数据交互都涉及USB设备控制器中断.当有事件发生时,USB设备控制器首先将事件信息通过DMA写入到事件缓冲区中,然后向CPU发出中断,随后CPU调用中断处理函数开始 ...

  6. USB协议详解第9讲(USB描述符-HID描述符)

    1.HID设备概述 USB设备中有一大类就是HID设备,即Human Interface Devices,人机接口设备.这类设备包括鼠标.键盘.游戏手柄等,主要用于人与计算机进行交互.HID设备可以作 ...

  7. Putty 远程 连接kali Linux拒绝访问 refused connection

    1. 设置  ssh 文件 crtl + alt + t 代开终端 输入命令: vim /etc/ssh/sshd_config 说明 : 使用 vim 编辑器编辑 ssh 文件 : 说明: 修改第3 ...

  8. webpack中 ,有哪些常见的Loader?他们是解决什么问题的?

    1. css-loader 翻译css ,可以把sass / less 代码翻译成 css 代码 : 2. imgage-loader 加载并压缩图片文件 3. source-map-loader 加 ...

  9. apisix~为自定义插件设计一个configmap脚本

    configMap Kubernetes 中的 ConfigMap 是一种用来存储配置数据的 API 资源,它允许您将配置信息以键值对的形式保存,并在容器中使用这些配置信息.ConfigMap 提供了 ...

  10. 同步完善Docker常用操作命令

    镜像 images_name 表示镜像名 con_name表示容器名 #获取镜像 docker pull images_name #查看已有的docker镜像 docker images #删除镜像 ...