后台需要加入富文本编辑器于是选择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. 深入理解c语言指针与内存

    一.将int强制转换为int指针,将int指针强转换为int void f(void) { int *p = (int*)100; //将int强制转换为int指针 printf("%d\n ...

  2. Angular Material 18+ 高级教程 – Get Started

    前言 本编是 Angular Material 教程的开篇,我先介绍一下这个教程. 首先,Angular Material 教程不会像 Angular 教程那么注重原理,也很少会逛源码. 所以,如果你 ...

  3. DOM – IntersectionObserver

    介绍 IntersectionObserver 的作用是监听某个元素是否出现在框内 (比如 viewport). 它可以实现 lazy load image, 一开始图片是没有加载的, 当图片出现在 ...

  4. mongo 副本集rs 理解和使用小结

    转载请注明出处: 在MongoDB中,rs(通常指的是"replica set"的缩写)是复制集(Replica Set)的标识符或在使用时的一种常见前缀,尤其是在命令行工具和脚本 ...

  5. Log4j2—漏洞分析(CVE-2021-44228)

    目录 Log4j2漏洞原理 漏洞根因 调用链源码分析 调用链总结 漏洞复现 dns rmi Log4j2漏洞原理 前排提醒:本篇文章基于我另外一篇总结的JNDI注入后写的,建议先看该文章进行简单了解J ...

  6. SimpleAISearch:C# + DuckDuckGo 实现简单的AI搜索

    最近AI搜索很火爆,有Perplexity.秘塔AI.MindSearch.Perplexica.memfree.khoj等等. 在使用大语言模型的过程中,或许你也遇到了这种局限,就是无法获取网上最新 ...

  7. Go 学习路线图

    基础阶段 学习内容: 掌握 Go 的基本语法,包括变量.常量.数据类型(如整数.浮点数.字符串.布尔值.数组.切片.映射等).运算符等. 理解程序的控制流,如条件语句(if-else.switch-c ...

  8. [TK] 三色二叉树 hzoi-tg#282 存图方法

    可以发现,假如在序列中遇到一个数为 \(2\) ,也就是有两个子节点,那么接下来的全部数字都是描述左树的,一直到左树被遍历完成. 这让你想到了什么? 当然是DFS啦. 根据DFS我们有下面这样的存图思 ...

  9. Android Systrace 基础知识 -- Systrace 简介

    1. 正文 Systrace 是 Android4.1 中新增的性能数据采样和分析工具.它可帮助开发者收集 Android 关键子系统(如 SurfaceFlinger/SystemServer/Ke ...

  10. element+vue2的查询form表单封装成组件复用

    <template> <el-form :inline="true" style="display: flex; flex-direction: row ...