1 - 安装

  1. pip install django-tinymce==2.6.0

2 - 注册app

  1. INSTALLED_APPS = (
  2.     ...
  3.     'tinymce',
  4. )

3 - 在setting中添加配置

  1. TINYMCE_DEFAULT_CONFIG = {
  2.     'theme': 'advanced',
  3.     'width': 600,
  4.     'height': 400,
  5. }

4 - 配置urls

  1. url(r'^tinymce/', include('tinymce.urls')),

5 - 配置完成，下面开始使用

（1）后台使用

  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. #1 路由：
    path('',index),

    #2 视图：

def index(request):

　　return render(request,'app01/index.html')

  1. #3 页面 HTML 代码

    # 在页面出现前需要引入静态文件：

　# 在python路径下找到tinymce目录，拷贝tiny_mce_src.js文件、langs文件夹以及themes文件夹拷贝到项目目录下的static/js/目录下

  1.  

{% 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>

  1.  

</body>
</html>

Django使用tinymce富文本编辑器的更多相关文章

  1. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  2. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  3. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

  4. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

  5. Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新）

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  6. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  7. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  8. Vue tinymce富文本编辑器

    tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 一.安装tinymce-vue npm install @tinymce/tinymce-vue -S 二.下载tinymc ...

  9. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

随机推荐

  1. tp phpexcel 导入后台访问方法

    public function addall(){ $Water = M('Waterrate'); $config = array( 'maxSize' => 0, 'rootPath' =& ...

  2. SaltStack 水平权限绕过漏洞（CVE-2020-11651）

    影响版本 SaltStack < 2019.2.4 SaltStack < 3000.2 poc git clone https://github.com/jasperla/CVE-202 ...

  3. 几篇关于RGBD语义分割文章的总结

      最近在调研3D算法方面的工作,整理了几篇多视角学习的文章.还没调研完,先写个大概.   基于RGBD的语义分割的工作重点主要集中在如何将RGB信息和Depth信息融合,主要分为三类:省略. 目录 ...

  4. 王者并发课-钻石2：分而治之-如何从原理深入理解ForkJoinPool的快与慢

    欢迎来到<王者并发课>,本文是该系列文章中的第25篇,砖石中的第2篇. 在上一篇文章中,我们学习了线程池ThreadPoolExecutor,它通过对任务队列和线程的有效管理实现了对并发任 ...

  5. Nmap的多进程应用与研究

    Nmap的多进程应用 使用Nmap进行多目标多端口(强调端口数目较多,比如全端口)扫描时,其在执行时间上的表现并不好.本文旨在分析多目标多端口扫描时的速度瓶颈以及减少时间成本的解决方案. 实验 实验环 ...

  6. XCTF-open-source

    下载附件拿到源码. #include <stdio.h> #include <string.h> int main(int argc, char *argv[]) { if ( ...

  7. Spring Boot 入门系列（二十二）使用Swagger2构建 RESTful API文档

    前面介绍了如何Spring Boot 快速打造Restful API 接口,也介绍了如何优雅的实现 Api 版本控制,不清楚的可以看我之前的文章:https://www.cnblogs.com/zha ...

  8. 时间转换 BASIC-14

    时间转换 给定一个以秒为单位的时间t,要求用"::"的格式来表示这个时间.表示时间,表示分钟,而表示秒,它们都是整数且没有前导的"0".例如,若t=0,则应输出 ...

  9. Ubuntu上安装gevent

    安装libevent; 安装greenlet: sudo easy_install gevent (need net access) bingo! -> python-dev -> lib ...

  10. erlang学习笔记

    安装 Ubuntu Server上: sudo apt-get install erlang 如果安装时下载 太慢,可手工下载deb包( esl-erlang_16.a-rc1_ubuntu_prec ...