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富文本编辑器的更多相关文章
	

    
								
  1. django后台集成富文本编辑器Tinymce的使用
		
    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
    
		
    2. 
						
  2. 在 Vue 项目中引入 tinymce 富文本编辑器
		
    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
    
		
    3. 
						
  3. tinymce 富文本编辑器 编写资料
		
    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...
    
		
    4. 
						
  4. vue中引入Tinymce富文本编辑器
		
    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...
    
		
    5. 
						
  5. Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新）
		
     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...
    
		
    6. 
						
  6. django中ckeditor富文本编辑器使用
		
    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
    
		
    7. 
						
  7. Django集成百度富文本编辑器uEditor
		
    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...
    
		
    8. 
						
  8. Vue tinymce富文本编辑器
		
    tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 一.安装tinymce-vue npm install @tinymce/tinymce-vue -S 二.下载tinymc ...
    
		
    9. 
						
  9. Django中添加富文本编辑器
		
    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java时间工具类型,格式化时间,最近7天 月初 月末  季度 月度 时间格式化 等等
			
    package com.tz.util; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util. ...
    
			
    2. 
						
  2. 大数据学习（04）——MapReduce原理
			
    前两篇文章介绍了HDFS的原理和高可用,下面再来介绍Hadoop的另外一个模块MapReduce.它的思想是很多技术的鼻祖,值得一学. MapReduce是什么 MapReduce是一个分布式计算系统 ...
    
			
    3. 
						
  3. SQL语句（四）联表查询
			
    目录 一.关联查询的分类 按年代分 按功能分 二.sql92语法的连接 语法 1. 简单应用 2. 为表起别名 3. 加入筛选 4. 加入分组 5. 三表连接 6. 非等值连接 7. 自连接 三.sq ...
    
			
    4. 
						
  4. SpringBoot系列——动态定时任务
			
    前言 定时器是我们项目中经常会用到的,SpringBoot使用@Scheduled注解可以快速启用一个简单的定时器(详情请看我们之前的博客<SpringBoot系列--定时器>),然而这种 ...
    
			
    5. 
						
  5. mock平台介绍和moco的简单例子
			
    1.mock是什么?mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法.在具体的测试过程中,我们经常会碰到需要模拟数据或者接口的情况,因为环 ...
    
			
    6. 
						
  6. 微信SDK的使用
			
    一.导入依赖 <!--微信支付--> <dependency> <groupId>com.github.wxpay</groupId> <arti ...
    
			
    7. 
						
  7. 命令执行 安鸾  Writeup
			
    目录 命令执行 01 命令执行 02 仅代码层面来说,任意命令执行漏洞的利用条件: 1.代码中存在调用系统命令的函数 2.函数中存在我们可控的点 3.可控点没有过滤,或过滤不严格. Linux命令连接 ...
    
			
    8. 
						
  8. 【监控】Zabbix安装
			
    目录 一.监控目的 二.监控方式 三.主流监控系统 四.Zabbix介绍 五.Zabbix服务端安装 5.1 环境介绍 5.2 准备系统环境 5.3 安装Nginx(源码编译安装) 5.3.1 配置N ...
    
			
    9. 
						
  9. 泛微OA e-cology 数据库接口信息泄露学习
			
    泛微OA e-cology 数据库接口信息泄露 漏洞信息 攻击者可通过存在漏洞的页面直接获取到数据库配置信息.如果攻击者可直接访问数据库,则可直接获取用户数据,甚至可以直接控制数据库服务器:会将当前连 ...
    
			
    10. 
						
  10. 解决docker-compose下载过慢
			
    https://blog.csdn.net/baidu_21349635/article/details/104628772
    
			
    11.