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. C#曲线分析平台的制作（一，ajax+json前后台数据传递）
			
    在最近的项目学习中,需要建立一个实时数据的曲线分析平台,这其中的关键在于前后台数据传递过程的学习,经过一天的前辈资料整理,大概有了一定的思路,现总结如下: 1.利用jquery下ajax函数实现: & ...
    
			
    2. 
						
  2. winform制作简易屏幕保护工具
			
    效果如下: 具体实现代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using S ...
    
			
    3. 
						
  3. 只是想虐下春丽，一不当心玩了下serverless...感觉还不错哟！
			
    事情是这样的-- 前天下午天太热,我在家看电视,换台突然就看到了正在播<西游记>,窗外蝉声特别响,我一下就有种穿越回小学暑假的感觉.当时,我就特别想把我那台小霸王翻出来,玩两盘街霸--虐一 ...
    
			
    4. 
						
  4. Mybatis学习笔记-分页
			
    为何要分页 减少数据处理量 便于前端展示数据 使用Limit分页 语法结构 SELECT * FROM user LIMIT startIndex,pageSize; SELECT * FROM us ...
    
			
    5. 
						
  5. [解决方案]docker: Error response from daemon: OCI runtime create failed
			
    错误原因 在新服务器上安装好docker后,发现无法运行,经常一顿搜索后,发现是docker安装的版本过高,最新版本docker-18.06 的核心好像没有经过充分的测试就发布了. 导致一运行,就提示 ...
    
			
    6. 
						
  6. rein 多平台支持的超便携端口转发与内网穿透工具
			
    介绍 本程序主要用于进行反向代理IP地址和端口,功能类似于 nginx 的 stream 模式和rinetd 的功能:在(1.0.5)版本开始,rein支持内网穿透,这一功能类似于frp 和ngrok ...
    
			
    7. 
						
  7. 【javaFX学习】（二） 面板手册
			
    移至http://blog.csdn.net/qq_37837828/article/details/78732591 更新 找了好几个资料,没找到自己想要的,自己整理下吧,方便以后用的时候挑选,边学 ...
    
			
    8. 
						
  8. 从零开始实现简单 RPC 框架 2：扩展利器 SPI
			
    RPC 框架有很多可扩展的地方,如:序列化类型.压缩类型.负载均衡类型.注册中心类型等等. 假设框架提供的注册中心只有zookeeper,但是使用者想用Eureka,修改框架以支持使用者的需求显然不是 ...
    
			
    9. 
						
  9. Java工具包之-Guava
			
    https://blog.csdn.net/zmx729618/article/details/78540026 https://my.oschina.net/realfighter/blog/349 ...
    
			
    10. 
						
  10. HTML5(十二)——一文读懂 WebSocket 原理
			
    一.WebSocket 由来 WebSocket 是一个持久化的协议,通过第一次 HTTP Request 建立连接之后,再把通信协议升级成 websocket,保持连接状态,后续的数据交换不需要再重 ...
    
			
    11.