Django admin 结合富文本编辑器tinymce
后台需要加入富文本编辑器于是选择tinymce
官方网站:http://django-tinymce.readthedocs.org/
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的更多相关文章
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- 富文本编辑器TinyMCE的使用(React Vue)
富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...
- 富文本编辑器 tinymce 的安装与使用
百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...
- Django 之 富文本编辑器-tinymce
这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- 富文本编辑器TinyMCE
最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...
- 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件wordpaster
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
- 富文本编辑器TInyMCE,本地图片上传(Image Upload)
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
- Django集成百度富文本编辑器uEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...
- Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...
随机推荐
- LeetCode题集-2 - 两数相加
这个题目是什么意思呢?简单来说就是把两个链表平铺开,头节点对齐,然后从头开始相同的节点相加,满10则进位,进位值与下个节点继续相加,当一个链表没有节点时候则可以把没有节点当做0继续与有节点的链表继续相 ...
- JavaScript中class的静态属性和静态方法
我们可以把一个方法赋值给类的函数本身,而不是赋给它的 "prototype" .这样的方法被称为 静态的(static). 例如这样: class Animal { static ...
- vue 消息订阅与发布
vue 消息订阅与发布 一.场景 vue中非父子组件之间通信时,使用vuex有时间会很麻烦,这时候可以通过bus总线来实现 消息的订阅与发布 二.实现方法 1.main.js //main.js Vu ...
- CSS – Dimension min-content, max-content, fit-content
前言 无意间在 practice 的时候看到视频使用, 以前没有听过. 它有点像 Figma 的 hug content, 据说 CSS 2.1 也是有类似的概念, 只是没有被正式纳入 CSS 里. ...
- Figma 学习笔记 – Constraints 约束
用途 Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize ...
- kali系统安装和CVE-2017-12615测试
1 安装kali系统 1.1 下载VMware压缩包 kali-linux-2022.1 默认的用户和密码是kali 1.2 初始化系统 sudo apt update -y #kali sudo a ...
- 解密prompt系列39. RAG之借助LLM优化精排环节
RAG的部分我们之前讨论过信息召回的多样性,信息密度和质量,主要集中在召回,融合,粗排的部分.这一章我们集中看下精排的部分.粗排和精排的主要差异其实在于效率和效果的balance.粗排模型复杂度更低, ...
- ROS基础入门——实操教程
ROS基础入门--实操教程 前言 本教程实操为主,少说书.可供参考的文档中详细的记录了ROS的实操和理论,只是过于详细繁杂了,看得脑壳疼,于是做了这个笔记. Ruby Rose,放在这里相当合理 前言 ...
- USB协议详解第8讲(USB描述符-字符串和语言ID描述符)
1.字符串描述符相关概念 字符串描述符:首先,字符串描述符就是用字符串描述一个设备的一些属性,毕竟人能看懂的是字符,而不是十六进制,描述的属性包括设备厂商名字.产品名字.产品序列号.各个配置名字.各个 ...
- Android :安卓学习笔记之 Handler机制 的简单理解和使用
目录 Handler机制 1.Handler使用的引出 2.背景和定义 3.作用和意义 4.主要参数 5.工作原理及流程 5.1.对应关系 6.深入分析 Handler机制源码 6.1.Handler ...