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. 在 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. QT-可拖拽可编辑的多控件ListView

    目标 结合前面的2篇文章, 继续升级QML版本的ListView: 又要拖拽, 又要可编辑, 还得支持多个控件. 循序渐进 本文基于前一篇的基础: Qt-可编辑的ListView 要循序渐进的学习. ...

  2. Git基本理论---重点

    Git本地有三个工作区域: 工作目录(Working Directory): 存放项目代码 暂存区(Stage/Index) : 临时存放文件的改动,保存的是文件列表信息 资源库 (Repositor ...

  3. Python小白的数学建模课-15.图论基本概念

    图论中所说的图,不是图形图像或地图,而是指由顶点和边所构成的图形结构. 图论不仅与拓扑学.计算机数据结构和算法密切相关,而且正在成为机器学习的关键技术. 本系列结合数学建模的应用需求,来介绍 Netw ...

  4. SQL遍历日期

    IF OBJECT_ID(N'tempdb..#temp', N'U') IS NOT NULL BEGIN DROP TABLE #temp;--临时表删除 END --创建临时表 CREATE T ...

  5. SpringCloud升级之路2020.0.x版-7.从Bean到SpringCloud

    本系列为之前系列的整理重启版,随着项目的发展以及项目中的使用,之前系列里面很多东西发生了变化,并且还有一些东西之前系列并没有提到,所以重启这个系列重新整理下,欢迎各位留言交流,谢谢!~ 在理解 Spr ...

  6. BUUCTF-[极客大挑战 2019]BabySQL(联合注入绕过waf)+[极客大挑战 2019]LoveSQL(联合注入)

    BUUCTF-[极客大挑战 2019]BabySQL(联合注入绕过waf) 记一道联合注入的题,这道题存在过滤. 经过手工的测试,网站会检验用户名和密码是否都存在,如果在用户名处插入注入语句,语句后面 ...

  7. Java_classpath

    Java_classpath 什么是classpath? classpath是JVM用到的一个环境变量,它用来指示JVM如何搜索class. 因为Java是编译型语言,源码文件是.java,而编译后的 ...

  8. repeatedly function in Clojure

    user=> (doc repeatedly) clojure.core/repeatedly ([f] [n f]) Takes a function of no args, presumab ...

  9. React Native 启动流程简析

    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v ...

  10. Java多线程 面试知识点总结1

    一.JMM(Java内存模型) 参考 老刘-JMM面试包过 HollisChuang-Java内存模型 <Java并发编程实战>Chapter-16 <深入理解Java虚拟机> ...