下载与安装django-tinymce

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django-tinymce==2.6.0

一，注册它

把它当作是一个应用，注册它

输入一并时就会被django识别的

完成注册后，加个备注就好

二，配置富文本编辑器

# 富文本编辑器 tinymce
TINYMCE_DEFAULT_CONFIG = {'theme': 'advanced',  # 主题'width': 600,  # 宽'height': 400  # 高
}

三，项目中配置路由

开始使用

现在看到的是一个例子：测试的时候是在user应用下的models里随便写的一个测试模型类

在任意一个需要用到它的模型类中写

比方说，商品详情，即需要贴图片，还需有文字编辑（加粗，变色等等）

》迁移，然后生成管理员


(base) G:\dailyfresh>python manage.py makemigrations
Migrations for 'user':apps\user\migrations\0003_mcetest.py- Create model MceTest(base) G:\dailyfresh>python manage.py migrate
Operations to perform:Apply all migrations: admin, auth, contenttypes, sessions, user
Running migrations:Applying user.0003_mcetest... OK(base) G:\dailyfresh>python manage.py createsuperuser
用户名: pyhui
电子邮件地址:
Password:
Password (again):
密码跟 用户名 太相似了。
密码长度太短。密码必须包含至少 8 个字符。
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.(base) G:\dailyfresh>

》后台注册

对应的应用下面的 admin.py

》看见我们建的测试表了

》尝试添加内容

》来一个大大的错误

》根据后端的提示解决报错源

参考了

render() got an unexpected keyword argument ‘renderer’----render（）得到了一个意外的关键字参数’renderer’ - Y2L111的博客 - CSDN博客
https://blog.csdn.net/Y2L111/article/details/86499588

按提示注销就好了

》可以快乐的使用这个富文本编辑器了

》富文本编辑器不止一种

更多的富文本编辑器用法差不太多

想要了解详情可参看网文

富文本编辑器 django_百度搜索
https://www.baidu.com/s?wd=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8+django&ie=UTF-8

了解关于字段的choice选项

choice参数传入一个元组

如此可以限定用户的操作

用户可选的就这两个，选项源自模型类中的定义限写下

了解这样的用法

后续如果有选项类的操作，可以考虑这么弄

。。。

注意这个测试的类后面不用了可以考虑删掉的。。。

小结富文本编辑器操作的五步

使用富文本编辑器的流程1 下载包
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django-tinymce==2.6.02 注册
同普通应用一样的去注册
tinymce3 配置
settings.py中添加配置
TINYMCE_DEFAULT_CONFIG = {'theme': 'advanced',  # 主题'width': 600,  # 宽'height': 400  # 高
}4 配置路由
path('tinymce/', include('应用名.urls'))5 在模型类中使用
一般在models模块中使用
导入HTMLField类
在需要字段那里定义

dj鲜生-12-富文本编辑器-tinymce 以及choice选择项目相关推荐

富文本编辑器tinymce 自定义中文字号（四号，小四，五号，小五等）
富文本编辑器tinymce 自定义中文字号(四号,小四,五号,小五等) 前因探索最终解决最终效果关键代码前因在写富文本编辑器转换word的过程中,因为所使用的富文本编辑器tinymce中的 ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...
富文本编辑器TinyMCE
最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...
js 免费可靠cdn地址（富文本编辑器tinymce的实践）
推荐一个 cdn源的可靠源地址(免费且持久) https://www.jsdelivr.com/?query=tinymce 有个富文本编辑的需求,要求导入html字符串去生成富文本htm,使用的是r ...
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
富文本编辑器Tinymce超简单使用
第一步: 1.下载组件富文本编辑器Tinymce-Javascript文档类资源-CSDN下载第二步: 1.复制Tinymce进项目的components文件夹中 2.复制tinymce4.7.5 ...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
vue整合富文本编辑器tinymce
一.复制文本编辑器组件到项目文件夹里面二.在build下的webpack.dev.conf.js里面添加 templateParameters: {BASE_URL: config.dev.asse ...
富文本编辑器 java_Java开发之富文本编辑器TinyMCE
一.题外话最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图特别是在用户想插入一个图片的话,就 ...

dj鲜生-12-富文本编辑器-tinymce 以及choice选择项目

下载与安装django-tinymce

一，注册它

二，配置富文本编辑器

三，项目中配置路由

开始使用

了解关于字段的choice选项

小结富文本编辑器操作的五步

dj鲜生-12-富文本编辑器-tinymce 以及choice选择项目相关推荐

最新文章

热门文章

dj鲜生-12-富文本编辑器-tinymce 以及choice选择项目

下载与安装django-tinymce

一，注册它

二，配置富文本编辑器

三，项目中配置路由

开始使用

了解关于字段的choice选项

小结 富文本编辑器操作的五步

dj鲜生-12-富文本编辑器-tinymce 以及choice选择项目相关推荐

最新文章

热门文章

小结富文本编辑器操作的五步