Django使用tinymce富文本编辑器
1 - 安装
pip install django-tinymce==2.6.0
2 - 注册app
INSTALLED_APPS = (
...
'tinymce',
)
3 - 在setting中添加配置
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'width': 600,
'height': 400,
}
4 - 配置urls
url(r'^tinymce/', include('tinymce.urls')),
5 - 配置完成,下面开始使用
(1)后台使用
# 在models中:
from django.db import models
from tinymce.models import HTMLField
class Test(models.Model):
title = models.CharField(max_length=100)
content = HTMLField()

(2)自定义在前端页面使用
#1 路由:
path('',index),
#2 视图:
def index(request):
return render(request,'app01/index.html')
#3 页面 HTML 代码
# 在页面出现前需要引入静态文件:
# 在python路径下找到tinymce目录,拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="{% static 'js/tiny_mce_src.js' %}"></script>
</head>
<body>
<script>
tinyMCE.init({
'mode':'textareas',
'theme':'advanced',
'width':450,
'height':300
})
</script>
<form action="">
<label>
<textarea name="comment_content">富文本</textarea>
</label>
<br>
<input type="submit" value="提交评论" class="btn btn-default">
</form>
</body>
</html>

Django使用tinymce富文本编辑器的更多相关文章
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- tinymce 富文本编辑器 编写资料
tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...
- vue中引入Tinymce富文本编辑器
最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...
- Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)
tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- Django集成百度富文本编辑器uEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...
- Vue tinymce富文本编辑器
tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 一.安装tinymce-vue npm install @tinymce/tinymce-vue -S 二.下载tinymc ...
- Django中添加富文本编辑器
使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...
随机推荐
- linux中的防火墙netfilter iptables
目录 一.Linux防火墙基础 1.1 ptables的表.链结构 1.2 数据包控制的匹配流程 二.编写防火墙规则 1.iptables的安装 2.1 基本语法.控制类型 一般在生产环境中设置网络型 ...
- Java 在Word中创建多级项目符号列表和编号列表
本文分享通过Java程序代码在Word中创建多级项目符号列表和编号列表的方法.程序运行环境如下: IntelliJ IDEA 2018(JDK 1.8.0) Word 2013 Word Jar包:F ...
- 月薪20k+的Android面试都问些什么?(含答案)
金九银十跳槽季接近尾声了,可是今年由于疫情的影响仍然不太好找工作,相信大家肯定急需一套Android面试宝典,下面就分享给大家我珍藏已久的Android高阶面试宝典,供大家学习 ! 1.自定义Hand ...
- 使用脚本下载Gmail邮件附件
以下脚本连接上我的Gmail帐号,将收件箱中2013年1月份的新语丝邮件的附件保存在当前目录的xys文件夹中. import imaplib import email import os dir_na ...
- linux服务器下TCP抓包
1.首先ifconfig查看当前服务器的网卡信息 2.执行tcpdump -i ens160[网卡信息] -s 0 port 8080[监听的端口号] -w ./fileName.pcapng 3.可 ...
- 使用JDBC(Dbutils工具包)来从数据库拿取map类型数据来动态生成insert语句
前言: 大家在使用JDBC来连接数据库时,我们通过Dbutils工具来拿取数据库中的数据,可以使用new BeanListHandler<>(所映射的实体类.class),这样得到的数据, ...
- 零基础学Java之Java学习笔记(三):变量和数据类型
为什么需要变量? 变量是一个程序的基本组成单位. 变量的概念: 变量相当于内存中一个数据存储空间的表示,你可以把变量看做是一个房间的门牌号,通过门牌号我们可以找到房 间,而通过变量名可以访问到变量(值 ...
- S3C2440—8.读写SDRAM
文章目录 一.内部结构 二.相关寄存器 BWSCON BANKCON6 REFRESH BANKSIZE MRSR 三.读写SDRAM SDRAM:Synchronous Dynamic Random ...
- Docker的使用笔记
介绍Docker Docker为了解决依赖的兼容问题的,采用了两个手段: 将应用的Libs(函数库).Deps(依赖).配置与应用一起打包 将每个应用放到一个隔离容器去运行,避免互相干扰 Docker ...
- Python中用max()筛选出列表中出现次数最多的元素
1 List = [1,2,3,4,2,3,2] # 随意创建一个只有数字的列表 2 maxTimes = max(List,key=List.count) # maxTimes指列表中出现次数最多的 ...