本章节主要了解的是----富文本编辑器
富文本编辑器(Rich Text Editor),简称RTE 可内嵌于浏览器 ;一般在编辑博客、用户交互方面用的比较多 ;富文本与普通文本区别:前者像写字板,后者只是个记事本
今天我们所使用的是百度富文本编辑器Ueditor
在开始操作之前,我们需要思考一个问题:前台Form和普通不上传的form的区别?
A)文件上传,必须加一个属性:enctype = ‘multipart/form-data’
B)form表单提交时要使用流技术通讯
C)提交方式为POST,并且有属性- enctype = ‘multipart/form-data’,就是以字节方式解析
下面就开始代码操作吧
(1) 首先提交页面,得写东西吧 创一个html文件
关于<form>标签中的enctype属性,我们可以详细了解一下,知道为什么使用它?
此处有链接详解: https://www.cnblogs.com/answercard/p/3710676.html
要使用富文本编辑器,前提是你得有它的一系列文件,所以在操作之前,先将富文本文件夹下文件全部COPY,放置在static文件夹下
放到这里就行了
(2)这一步,就是一些配置的操作
路径配置:找到examples(示例)文件夹下,名叫index的文件
点击进入,去高级案例里,找到jquery
可以看到<head>标签里的<script>标签,引入了两个js文件
将其复制到自己写的html文件中去,但是路径要改一改!根据实际情况,不然出错了不好找出问题
看看你自己两个文件-----ueditor.config.js 和 editor_api.js ,在pycharm中放置的位置,去配置路径,我的配好了是这样的
现在该写到form表单了,直接复制粘过来就好,改动一下id和name ,简单设置一下样式<style>
作为编辑框这边还缺点东西,有个问题需要面对:
让Ueditor有固定的行高,当内容超过行高时不会自动向下延伸,而是在右边出现一个滚动条,如何实现?
需要我们添加一个js
var editor_a = UE.getEditor('blogContent',{initialFrameHeight:500});
这一步就是定义编辑器的初始高度,也可以定义宽度、最大输入数字、不允许自动增高(这一项很重要,不设置的话,放一张很大的图片进去,编辑框会拉的很长)
我找了ueditor常用的函数,大家可以了解一下: https://www.cnblogs.com/sosoft/p/3450519.html
到这还没结束,还差最后一步,找到 editor_api.js文件 ,对它的基本路径进行修改
好了,开始运行程序,内容写哪 就输入所在的路径,回车就能看到富文本框
发布后的内容是这样的: