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. 用webpack发布一个vue插件包
			
    创建库 本来以为很简单,结果配置了webpack之后,运行build就报错了,似乎不认识es6语法,于是先后安装了几个包: @babel/core @babel/preset-env babel-lo ...
    
			
    2. 
						
  2. 大数据学习（13）—— HBase入门
			
    从这一篇起,开始介绍HBase相关知识.还是一样,大数据的学习,获取官网知识很重要.官网看这里Apache HBase HBase简介 Apache HBase is the Hadoop datab ...
    
			
    3. 
						
  3. 【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)
			
    通过Azure App Service门户,启用Health Check来监视应用服务的实例,当发现其中一个实例处于不健康(unhealthy)状态时,通过重新路由(即把有问题的实例从负载均衡器中移除 ...
    
			
    4. 
						
  4. 从 HTTP 切换到 HTTPS，这下我的技术博客安全了吧？
			
    博客园 的小伙伴们,大家好,我是刚脱离险境的二哥呀! 很久(大概两年)之前,我就搞了一个独立的个人博客网站,长下面这样. 大家有访问过的,可以在评论区扣 1 可惜一直没搞备案和 HTTPS,导致每次访 ...
    
			
    5. 
						
  5. 就这？分布式 ID 发号器实战
			
    分布式 ID 需要满足的条件: 全局唯一:这是最基本的要求,必须保证 ID 是全局唯一的. 高性能:低延时,不能因为一个小小的 ID 生成,影响整个业务响应速度. 高可用:无限接近于100%的可用性. ...
    
			
    6. 
						
  6. IP地址,InetAddress类的使用
			
    IP地址 IP地址:InetAddress(没有构造器,通过静态方法返回) java.net包下 唯一定位一台网络上的计算机 127.0.0.1:本机localhost ip地址的分类 IPV4/IP ...
    
			
    7. 
						
  7. 关于表单重复提交之验证码 和谷歌Kaptcha图片验证码的使用
			
    表单重复提交之-----验证码 表单重复提交有三种常见的情况: 一:提交完表单.服务器使用请求转来进行页面跳转.这个时候,用户按下功能键 F5,就会发起最后一次的请求. 造成表单重复提交问题.解决方法 ...
    
			
    8. 
						
  8. excel的导入与导出---通用版
			
    excel的导入与导出---通用版 web项目关于导入导出的业务场景很常见,最近我就又遇到了这个业务场景.这次将最近半个月做的导入导出总结一下 使用的pom如下,主要还是阿里巴巴的easyexcel依 ...
    
			
    9. 
						
  9. 嵌入式linux启动过程详解
			
    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬 ...
    
			
    10. 
						
  10. SpringMVC学习07（Ajax）
			
    7.Ajax研究 7.1 简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况 ...
    
			
    11.