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. 复杂多变场景下的Groovy脚本引擎实战
			
    一.前言 因为之前在项目中使用了Groovy对业务能力进行一些扩展,效果比较好,所以简单记录分享一下,这里你可以了解: 为什么选用Groovy作为脚本引擎 了解Groovy的基本原理和Java如何集成 ...
    
			
    2. 
						
  2. noip模拟29[简单的板子题](虽然我不会)
			
    \(noip模拟29\;solutions\) 这次考试给我最大的伤害,让我意识到了差距 这场考试可以说是非常的简单,就是简单到,看两眼,打个表就有结果了 但是呢?我考得非常的完蛋,只有30pts 据 ...
    
			
    3. 
						
  3. 几篇关于RGBD语义分割文章的总结
			
      最近在调研3D算法方面的工作,整理了几篇多视角学习的文章.还没调研完,先写个大概.   基于RGBD的语义分割的工作重点主要集中在如何将RGB信息和Depth信息融合,主要分为三类:省略. 目录  ...
    
			
    4. 
						
  4. IDEA输出乱码“淇℃伅”
			
    尝试过在IDEA中tomcat的vmoptions中加入代码 -Dfile.encoding=GBK 没什么用 最后找到了这个方法 参考链接 ①在Tomcat文件夹下找到conf ②找到logging ...
    
			
    5. 
						
  5. 单片机学习（五）LCD1602和矩阵键盘的使用
			
    目录 LCD1602的使用 矩阵键盘的使用 矩阵键盘相关电路图 按键检测扫描 制作密码输入器 LCD1602的使用 首先LCD1602是外接在开发板上的液晶屏外设,如图所示: 我们主要使用它来代替动态 ...
    
			
    6. 
						
  6. 蓝凌OA前台任意文件读取漏洞利用
			
    近期CNVD爆出漏洞编号:CNVD-2021-28277,首次公开日期为2021-04-15,蓝凌oa存在多个漏洞,攻击者可利用该漏洞获取服务器控制权.今天挑选一个蓝凌OA前台任意文件读取漏洞进行分析 ...
    
			
    7. 
						
  7. Javas数组03——数组的使用
			
    Javas数组--数组的使用 1.普通的for循环 2.for-each循环 3.数组做方法入参 4.数组做返回值 例子1--普通for循环  package array; ​ public clas ...
    
			
    8. 
						
  8. 第一个Java文件
			
    HelloWorld 1.新建一个文件夹,用来存放java文件的 2.用subline来编辑第一个Java文件 要注意的是java的文件名为.java 我们自定义的文件名是Hello 3.编写第一个j ...
    
			
    9. 
						
  9. linux基础操作命令合集（一）
			
    linux基础操作命令合集(一) 目录 linux基础操作命令合集(一) 一.命令行提示符 二.切换用户 三.主机名称命令 3.1.临时设置主机名 3.2.永久设置主机名 四.查看系统版本 五.网卡相 ...
    
			
    10. 
						
  10. 关于knn算法的总结思考
			
    更多的关于k近邻算法的思考 KNN(K- Nearest Neighbor)法即K最邻近法,数据挖掘分类技术中最简单的方法之一 对k近邻算法的总结: 优点部分 其可以解决分类问题,同时可以天然的解决多 ...
    
			
    11.