初遇---富文本编辑器

本章节主要了解的是----富文本编辑器

 

富文本编辑器(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表单了,直接复制粘过来就好,改动一下idname ,简单设置一下样式<style>


作为编辑框这边还缺点东西,有个问题需要面对:

Ueditor有固定的行高,当内容超过行高时不会自动向下延伸,而是在右边出现一个滚动条,如何实现?

需要我们添加一个js


var editor_a = UE.getEditor('blogContent',{initialFrameHeight:500}); 

这一步就是定义编辑器的初始高度,也可以定义宽度、最大输入数字、不允许自动增高(这一项很重要,不设置的话,放一张很大的图片进去,编辑框会拉的很长)

我找了ueditor常用的函数,大家可以了解一下: https://www.cnblogs.com/sosoft/p/3450519.html



到这还没结束,还差最后一步,找到 editor_api.js文件 ,对它的基本路径进行修改



好了,开始运行程序,内容写哪 就输入所在的路径,回车就能看到富文本框



发布后的内容是这样的:



























  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值