百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

Python项目中用富文本编辑器展示精美网页

yuyutoo 2024-10-12 01:14 5 浏览 0 评论

富文本编辑器实现效果图：

关注，转发，私信小编“01”即可获取Python入门学习资料！

左侧编辑区域，右侧渲染到HTML显示效果，除了渲染时候代码样式有所不同，其他标题、文字、图片基本满足所见即所得的效果




下面讲解富文本编辑器在Django项目中如何使用

1、前端页面引入js文件：

所用编辑器为tinymce.js,引入两个js文件

2、html代码布局：

左侧编辑区域，右侧渲染后预览区域

下面div左浮动，里面的textarea是富文本编辑区域，注意id要用rich_content，name也要加, {{ content }}是我在提交时候后端返回的数据，方便重新在编辑区域渲染数据

submit通过表单默认的提交方式向后端发post请求传数据

下面是右侧展示的div，右浮动，左右浮动为了更好地对比效果，不用来回滑动滚动条，返回的content其实就是html字符串，我们渲染到浏览器即可

3、Django后端代码

@csrf_exempt是ajax和form表单的post请求csrf解决办法，如果是form表单的post请求，也可以在form中加{% csrf_token %}

前端是form表单请求，后端只需要根据键从表单中读数据就行，我们的富文本编辑器name属性值为content，则直接get("content")即可

返回到前端的content，即富文本的html字符串，我们分别在编辑器和右侧都进行了渲染，即可见到最开始的效果

本文富文本编辑器仅测试部分常见效果没有什么问题，另外富文本编辑器也有CKeditor、Ueditor等等，如果大佬们有关于这些的开源demo，也欢迎学习交流

相关推荐

3种方式自动化控制APP（自动化控制方式有哪些）

自动化控制APP不管是在工作还是生活方面，都可以帮助我们高效地完成任务，节省时间和精力。本文主要介绍自动化控制APP的3种常用方式。1、Python+adb...

ADB 下载、安装及使用教程:让你更好地管理 Android 设备

简介作为一名测试工程师，我们经常需要在我们的Android设备上进行调试、管理或者定制。而Android调试桥（ADB）是Google官方提供的工具，可以帮助我们在计算机上与Androi...

手把手教你如何使用免费自动化工具——Appium(安卓版)

上次在上传了一篇Appium后，有人来问我有没有Andriod版的安装教程，这个当然有，抱着负责任的心，在上班摸鱼小半天之后，可算是把教程编辑好了准备环境JDKPython...

基于 Kotlin KMP 实现 HarmonyOS 与 Android 双平台 SDK 开发实践

背景随着鸿蒙平台的进一步发展，大家的态度也逐渐从观望转向实际投入，越来越多的公司开始考虑将自家应用迁移到鸿蒙平台。但是这一过程并非想象中的那么简单，尤其对于已经存在很多年的大型项目来说，直接投入大量人...

Android SDK——adb常见命令（android的adb）

1、adbdevices：检查设备2、adbinstallAPP安装包路径：安装APP3、adbuninstallAPP的程序包名（使用aapt可获取，也可问开发）：卸载APP...

Android apk 打包流程（android怎么打包apk）

打包流程①打包资源文件，生成R.java文件打包资源的工具是aapt（TheAndroidAssetPackaingTool），位于android-sdk/platform-tools目录下。...

穿越时间·一步到位，教你完美安装Windows 11 Android 安卓子系统

一、适用于AndroidTM的Windows子系统...

Android 5.1 内置应用抢先用，附安装教程

其实在Google低调发布Android5.1更新之前，一些Android5.1的系统应用已提前泄露。虽然Android5.0与Android5.1在版本号上只相差0.1...

零基础入门Android-kotlin开发之开发工具的安装

Android与kotlinAndroid：美国谷歌公司开发的移动操作系统Kotlin：是一个用于现代多平台应用的静态编程语言，由JetBrains开发。2017年Google宣布Kotlin正式...

Xamarin.Android使用教程:简介和安装

简介目前，有超过1亿的Android设备被激活，因此大约有十亿人开发Android应用程序。那么接下来，小编将为大家介绍一系列的Xamarin.Android使用教程，希望能对大家的Android开发...

安卓APP开发中，如何使用加密芯片?

加密芯片是一种专门设计用于保护信息安全的硬件设备，它通过内置的加密算法对数据进行加密和解密，以防止敏感数据被窃取或篡改。如下图HD-RK3568-IOT工控板，搭载ATSHA204A加密芯片，常用于有...

第7篇:手机APP逆向之开发环境搭建(3)NDK安装与配置

第7篇：手机APP逆向之开发环境搭建(3)NDK安装与配置作为手机APP逆向开发环境要有以下几个部分。昨天讲了SDK安装与配置，今天，我们就要讲NDK环境配置。NDK的意思是Nativedevel...

手把手教零基础小白搭建APP的UI自动化环境

前言帮助零基础小白一步步搭建UI自动化环境，完成Python+Appium+模拟器/真机的UI自动化环境搭建。...

用Java开发Android App（用Java开发微信小程序）

使用Java开发AndroidApp主要依赖AndroidStudio，以下是详细步骤：1.安装开发环境...

nRF52832使用官方SDK开发入门教程

1.开发工具下载安装针对nRF52832的开发，首先需要下载安装对应工具，主要安装的工具有nRFgoStudio、Command-Line-Tools、IAR。IAR是编程者必须的工具，因此在这里...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表