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>





 




 






            

            
posted @ 
2021-05-08 14:35 
映辉 
阅读(587) 
评论(0) 
 
收藏 
举报