Python项目中用富文本编辑器展示精美网页
富文本编辑器实现效果图:
左侧编辑区域,右侧渲染到HTML显示效果,除了渲染时候代码样式有所不同,其他标题、文字、图片基本满足所见即所得的效果
下面讲解富文本编辑器在Django项目中如何使用
1、前端页面引入js文件:
所用编辑器为tinymce.js,引入两个js文件
<script src="/static/tinymce/tinymce.min.js"></script><script src="/static/tinymce/tinymce_setup.js"></script></script><script src="/static/tinymce/tinymce_setup.js"></script>
2、html代码布局:
左侧编辑区域,右侧渲染后预览区域
下面div左浮动,里面的textarea是富文本编辑区域,注意id要用rich_content,name也要加, {{ content }}是我在提交时候后端返回的数据,方便重新在编辑区域渲染数据
submit通过表单默认的提交方式向后端发post请求传数据
<div class="form-group" style="float:left"> <form action="/webproduct/4/" method="post"> <label>内容:</label> <textarea class="input_area" id="rich_content" name="content" >{{ content }}</textarea> <input type="submit" value="提交"> </form></div>"form-group" style="float:left"> <form action="/webproduct/4/" method="post"> <label>内容:</label> <textarea class="input_area" id="rich_content" name="content" >{{ content }}</textarea> <input type="submit" value="提交"> </form></div>
下面是右侧展示的div,右浮动,左右浮动为了更好地对比效果,不用来回滑动滚动条,返回的content其实就是html字符串,我们渲染到浏览器即可
<div class="box" style="margin-bottom: 200px;float:right;"> {{ content|safe }}</div>"box" style="margin-bottom: 200px;float:right;"> {{ content|safe }}</div>
3、Django后端代码
@csrf_exempt是ajax和form表单的post请求csrf解决办法,如果是form表单的post请求,也可以在form中加{% csrf_token %}
前端是form表单请求,后端只需要根据键从表单中读数据就行,我们的富文本编辑器name属性值为content,则直接get("content")即可
@csrf_exempt@login_requireddef webproduct_manage4(request): content = request.POST.get('content') return render(request,"webproduct/webproductContent3.html",{"content":content})@login_requireddef webproduct_manage4(request): content = request.POST.get('content') return render(request,"webproduct/webproductContent3.html",{"content":content})
返回到前端的content,即富文本的html字符串,我们分别在编辑器和右侧都进行了渲染,即可见到最开始的效果
本文富文本编辑器仅测试部分常见效果没有什么问题,另外富文本编辑器也有CKeditor、Ueditor等等,如果大佬们有关于这些的开源demo,也欢迎学习交流
python爬虫人工智能大数据公众号
Python项目中用富文本编辑器展示精美网页相关推荐
- 【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
本人前端烂,文章展示部分现在还弄的不好. 效果: 很想实现点击查看详情然后进入查看具体的文章内容,但还不知道怎么弄,有知道的兄弟可以教我一下. 首先npm下载: cnpm install vue-qu ...
- 在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
- vue项目中 一行文本 文字 根据关键字 改变颜色 改变展示颜色2
vue项目中 一行文本 文字 根据关键字 改变颜色 改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- vue3开发1:在vue3项目中集成ckeditor5编辑器,自定义图片上传,图片编辑排坑(一)
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ck ...
- Django-使用富文本编辑器
title: Django-使用富文本编辑器 copyright: true top: 0 date: 2019-07-14 19:57:15 tags: categories: WEB 后端框架 p ...
- 学习日志day46(2021-09-10)(1、使用富文本编辑器simditor)
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
最新文章
- 《Android应用开发攻略》——1.3 从命令行创建 “Hello, World”应用程序
- 汇总 | 深度学习中图像语义分割基准数据集详解
- 3.1 Tensorflow: 批标准化(Batch Normalization)
- Android Studio 突然出现很多红色波浪线或红色感叹号解决方案
- Oracle 10g 问题集锦
- 10倍!微软开源深度学习优化库DeepSpeed,可训练1000亿参数模型
- 20172315 2017-2018-2 《程序设计与数据结构》第九周学习总结
- 冬日圣诞节海报还没灵感?看这里!
- RecycleView的Item Decoration间隔样式
- JavaScript中的面向对象--对象创建
- supersocket缓冲区_SuperSocket学习进展
- NCRE | 四级网络工程师错题
- 李宇春-唐人街无损品质mp3-flac音乐歌曲网盘免费下载
- 区块链平台架构设计的知识图谱
- 英语绕口令大全 练习你的口语
- 【毕业设计源码】基于JAVA的自驾游小程序的设计与实现
- 二、JavaWeb动态网页基础
- 几行烂代码,用错 Transactional,我赔了16万。
- Oracle恢复误删数据
- 如何使用ODB(How to use odb On windows)
热门文章
- matlab分段函数
- 关于主机的思维导图_「停课不停学」思维导图—初中语文全部知识点总结,高清可打印...
- android word转html标签,移动端html展示word文档转换方法
- 《永磁无刷直流电机技术》笔记
- 实现memcpy函数
- Xilinx ISE 14.7 设置编辑器字体大小
- 在计算机中 无符号书最常用于表示,2012年9月计算机等考《一级MS Office》全真模拟试卷(19)...
- 服务器基础知识:包含基本概念,作用,服务器选择,服务器管理等(学习来自米拓建站)
- 用css控制点击穿透
- srs提供的rtmp客户端srs-librtmp