用django-tinymce搞个富文本编辑器

玩过一圈之后,这些应用慢慢变得简单:

步骤如下:

一,安装:

pip install django-tinymce

二,配置APP:

INSTALLED_APPS = (
    ...
    ‘tinymce‘,
    ...
)

三,配置URL:

urlpatterns = patterns(‘‘,
    ...
    (r‘^tinymce/‘, include(‘tinymce.urls‘)),
    ...
)

四,更改MODEL字段:

from django.db import models
from tinymce import models as tinymce_models

class MyModel(models.Model):
    my_field = tinymce_models.HTMLField()

五,在TEMPLATES里定义django-tinymce样式,自动用于texearea字段。

<script type="text/javascript" src="{% static "tiny_mce/tiny_mce.js" %}"></script><script type="text/javascript">    tinyMCE.init({        mode: "textareas",        theme: "simple",

    });    </script>{% endblock %}

六,基本的样子就出来了,余下的就修补修补吧。

时间: 2024-09-29 22:40:03

用django-tinymce搞个富文本编辑器的相关文章

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

django xadmin 集成DjangoUeditor富文本编辑器

本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://github.com/wsqy/DjangoUeditor.git 解压后将 DjangoUeditor 文件夹复制到django项目目录下,跟app目录同级 修改app models 导入UEditorField 模块 增加需要富文本框的字段 from DjangoUeditor.models impor

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作 在项目根目录的public目录下

使用wangEditor富文本编辑器

wangEditor官网地址:http://wangeditor.github.io/ 今天忽然想起来搞一下富文本编辑器的使用,本来想用百度的ueditor,但是貌似校园网给墙了.然后从知乎上发现了这个编辑器,优点是界面简洁,文档比较清楚.缺点也显而易见,比较简陋,要求不是很高的话,还是可以的 :) 下载解压完成之后,用到的只有dist这个文件. 作者在看云上发布的手册地址: http://www.kancloud.cn/wangfupeng/wangeditor2/113994 前台页面代码:

各大富文本编辑器对比

各大WYSIWYG编辑器的简单比较 TinyMCE强大的富文本编辑器,支持拖拽.粘贴上传图片,支持拖拽表格.博客园用的就是这个编辑器. 参考博客:1.   https://segmentfault.com/a/1190000012791569#articleHeader8   vue项目移植tinymce踩坑 2. https://blog.csdn.net/haoxiaoyong1014/article/details/82683428   Vue 自定义富文本编辑器 tinymce 支持导入

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

富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pip install django_tinymce直接下载安装) 安装完成之后,就可以在C:\python3.6\Lib\site-packages这个文件夹. 点击进入文件夹,copy"tinymce"这个文件到你的项目的根目录下. 3.配置tinycmce到你的项目中,配置到admin数

django富文本编辑器

-------------------tinymce富文本编辑器1.下载安装 1.在网站pypi网站搜索并下载"django-tinymce-2.4.0" 2.解压:tar zxvf django-tinymce-2.4.0.tar.gz 3.进入解压后的目录,工作在虚拟环境,安装: python setup.py install 2.应用到项目 1.在settings.py中为INSTALLED_APPS添加编辑器应用 INSTALLED_APPS = ( ... 'tinymce'

Django 配置App特定类的富文本编辑器

版本:Django:1.6  Python:2.7 下载TinyMCE.http://www.tinymce.com/download/download.php 解压.将其中的tinymce文件夹放在Django的静态文件目录/static/下. 在tinymce文件夹中已经有tinymce.min.js这个JS文件:我们需要做的是在当前目录下(与tinymce.min.js同级)另外新建一个tinymce_config.min.js: 填充内容如下: tinymce.init({ select

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器